网络请求优化

中等 🟡性能优化

4 个标签

预计阅读时间：6 分钟

性能优化网络请求HTTP/2缓存策略

网络请求优化

网络请求是前端性能的关键瓶颈，优化网络请求可以显著提升页面加载速度和用户体验。

HTTP 协议优化

HTTP/2：

•多路复用：一个连接处理多个请求：HTTP/2引入的多路复用特性允许在单个TCP连接上同时传输多个请求和响应数据，突破了HTTP/1.1的队头阻塞问题，在HTTP/1.1中浏览器通常只能并发6个请求，而HTTP/2可以在一个连接上并发传输任意数量的请求，大幅提高了页面资源的并行下载能力，是HTTP/2性能提升的核心特性

•服务器推送：主动推送资源：HTTP/2的服务器推送允许服务器在客户端请求某个资源时，主动将相关资源推送到客户端缓存中，当浏览器需要这些资源时可以直接从缓存使用，无需等待请求，例如当浏览器请求HTML页面时，服务器可以主动推送相关的CSS、JavaScript和图片资源，减少后续请求的延迟，服务器推送可以显著减少首屏加载时间

•头部压缩：减少头部大小：HTTP/2使用HPACK算法对请求和响应头部进行压缩，包括静态表（常见的头部字段）、动态表（当前连接中出现的头部字段）和哈夫曼编码，显著减少了头部传输的数据量，在HTTP/1.1中每个请求都需要携带完整的Cookie、User-Agent等头部，而HTTP/2只需要传输头部索引，大幅减少了网络传输开销

•二进制分帧：更高效的数据传输：HTTP/2将数据分割成更小的帧进行传输，每个帧都有帧头标识其所属的流（请求/响应），相比HTTP/1.1的文本格式，二进制格式解析更高效，错误更少，二进制分帧是多路复用的基础，允许在单个连接上并发传输多个请求和响应，同时保持顺序正确，是HTTP/2高性能的重要基础

HTTP/3：

•基于 QUIC 协议

•更快的连接建立

•更好的拥塞控制

•更强的可靠性

HTTPS：

•加密传输

•提高安全性

•搜索引擎排名优势

•浏览器信任度高

缓存策略

强缓存：

•Cache-Control 响应头

•Expires 响应头

•不需要向服务器发起请求

•直接使用缓存资源

协商缓存：

•ETag 响应头

•Last-Modified 响应头

•向服务器发起请求验证资源是否过期

•未过期则使用缓存

缓存策略选择：

•静态资源：长缓存时间：对于不经常变化的静态资源如JavaScript、CSS、图片、字体等，应该设置较长的缓存时间（如一年），通过Cache-Control: max-age=31536000响应头实现，这样浏览器在首次加载后会缓存这些资源，后续访问直接从缓存读取，显著减少加载时间，通常配合文件名哈希（content hashing）实现缓存更新，当文件内容变化时生成新的哈希值，文件名变化后浏览器会重新请求

•动态资源：协商缓存：对于经常变化的动态资源如HTML页面、API数据等，应该使用协商缓存策略，通过ETag或Last-Modified响应头让浏览器在后续请求时验证资源是否更新，浏览器发送If-None-Match或If-Modified-Since请求头，服务器判断资源是否变化，未变化返回304状态码使用缓存，变化则返回新资源，协商缓存可以在保证内容新鲜度的同时减少数据传输

•关键资源：预加载：对于首屏渲染必需的关键资源如关键CSS、关键JavaScript、首屏图片等，应该使用preload预加载，让浏览器提前开始下载，避免渲染阻塞，preload可以设置正确的资源优先级，确保关键资源优先下载，通常将首屏必需的CSS内联到HTML中，JavaScript使用defer或async加载，避免阻塞HTML解析

•非关键资源：延迟加载：对于非首屏必需的资源如图片、JavaScript模块、组件等，应该使用懒加载策略延迟加载，图片使用loading="lazy"属性或Intersection Observer API实现懒加载，JavaScript使用动态import()语法进行代码分割和按需加载，延迟加载可以减少首屏加载时间，加快首次内容绘制，让用户更快看到页面内容

请求优化

减少请求数量：

•资源合并：CSS/JS 合并

•精灵图：合并小图标

•内联关键 CSS

•减少第三方脚本

减少请求大小：

•压缩资源：gzip、brotli

•最小化 CSS/JS/HTML

•优化图片：WebP、压缩

•移除不必要的代码

请求优先级：

•预加载关键资源

•延迟加载非关键资源

•合理使用资源提示

•优化请求顺序

CDN 与边缘计算

CDN：

•内容分发网络

•就近访问资源

•提高加载速度

•减轻源服务器负担

边缘计算：

•在边缘节点处理请求

•减少延迟

•提高响应速度

•适合动态内容

连接优化

DNS 优化：

•DNS 预解析

•减少 DNS 查询时间

•使用可靠的 DNS 提供商

•合理设置 DNS TTL

TCP 优化：

•启用 TCP 快速打开

•优化 TCP 窗口大小

•减少 TCP 连接建立时间

•使用 HTTP 持久连接

TLS 优化：

•启用 TLS 会话复用

•使用 TLS 1.3

•减少 TLS 握手时间

•优化证书链

监控与分析

网络监控：

•Chrome DevTools Network 面板

•WebPageTest

•Lighthouse

•New Relic

关键指标：

•DNS 解析时间

•TCP 连接时间

•TLS 握手时间

•首字节时间 (TTFB)

•内容传输时间

•总加载时间

最佳实践

•升级到 HTTP/2 或 HTTP/3

•实现合理的缓存策略

•减少请求数量和大小

•使用 CDN 分发静态资源

•优化 DNS 和 TCP 连接

•监控网络性能

•持续优化和测试

•考虑不同网络环境