网络性能优化

浏览器在加载页面时，大量的性能瓶颈集中在资源的请求、传输、解析与执行上。因此，网络层的性能优化主要目标是：减少请求次数、降低资源大小、缩短首屏时间、提升加载体验。

一、请求数量优化

1. 合理拆分和合并资源

• 按需加载（lazy loading / dynamic import）：不一次加载所有模块，只加载当前页面/功能所需资源。
• 资源合并（资源打包）：减少请求数量，如合并多个 CSS/JS 文件（现代工具也支持 HTTP2 下保留拆分）。
• 服务端渲染/预渲染：减轻首屏资源请求压力。

2. 使用缓存避免重复请求

• 使用浏览器缓存控制（Cache-Control、ETag、Last-Modified）；
• 对于不变资源，设置强缓存（immutable）；
• 对接口返回数据做缓存（前端缓存策略或 HTTP 层缓存）；
• 本地缓存，如 IndexedDB / LocalStorage 存储接口数据。

二、资源体积优化

1. 压缩与代码优化

• 启用 Gzip / Brotli 压缩静态资源（HTML、CSS、JS）；
• 压缩图像（WebP、AVIF）、字体、视频等媒体资源；
• 减少 polyfill 体积（如使用 core-js 按需引入）；
• 移除无用代码（Tree Shaking、CSS Purge、babel-plugin-transform-remove-console）；

2. 精简传输内容

• 请求接口时使用精简字段、分页、后端裁剪；
• GraphQL 可按需返回字段，减少冗余数据传输；
• 降低 Cookie 和请求头大小，避免请求体负担。

三、加载顺序与优先级优化

1. 关键资源优先加载

• 使用 preload、prefetch、dns-prefetch 等 <link> 标签提示浏览器提前加载；
• 使用 Webpack 的资源预加载配置控制打包 chunk 优先级；
• 首屏资源内联（inline critical CSS）避免阻塞渲染。

2. 非关键资源延后加载

• 图片懒加载（loading="lazy"、IntersectionObserver）；
• JS 异步加载（<script async|defer>）；
• 第三方 SDK、监控等可延迟初始化。

四、协议与传输层优化

1. 使用 HTTP/2 或 HTTP/3

• 多路复用，减少 TCP 连接数，提高并发请求效率；
• 头部压缩与服务器推送（HTTP/2 Push）；
• HTTP/3 基于 QUIC，有更快的连接建立速度与更少的丢包重传。

2. 减少不必要的重定向

• 避免链式跳转；
• 减少使用 302/301 等中间状态跳转，优化首次加载路径。

五、安全策略与跨域优化

• 合理设置 CORS，减少 preflight 请求；
• 使用同源策略时避免冗余 OPTIONS 请求；
• 减少跨域请求带来的额外开销（如 DNS、TLS 握手等）。

六、CDN 与资源分发优化

• 使用 CDN 加速静态资源访问，减少物理距离造成的 RTT；
• 使用全局 CDN 覆盖，支持边缘缓存与智能调度；
• 配合版本号和 Hash 控制缓存刷新策略。

七、服务端协同优化

• 接口合并：多个小请求可由后端合并为一次大请求返回；
• 接口压缩与限流：避免无用数据占带宽；
• 优化接口响应结构与字段粒度；
• 为前端提供异步批量资源接口（如配置/字典项/用户信息等合并加载）；

八、实际指标与监控优化点

• 首字节时间（TTFB）优化；
• 首屏渲染时间（FCP、LCP）优化；
• 页面总加载时间（Fully Loaded）优化；
• 网络错误率（如资源 404、接口失败率）监控；
• 使用 Performance API、Web Vitals、Lighthouse 工具分析网络瓶颈。

要点总结

• 网络优化的本质是：更快、更少、更智能地请求资源；
• 从请求数量、资源大小、传输协议、加载优先级、缓存策略、CDN 分发等多个维度同时入手；
• 优化不是单一操作，而是持续评估、定位瓶颈、迭代调整的过程；
• 实际开发中建议结合 Chrome DevTools、Lighthouse、Performance API 等工具进行精细化分析与验证。

常见考点

前端“网络层面的性能优化”是高频面试考点，涵盖了从资源加载、缓存、连接管理，到协议选择等多个方向。面试时往往从“用户输入 URL 到页面加载”这条链路入手，考查在网络传输环节提升页面性能的能力。

1. DNS 优化

• 使用 DNS 预解析（<link rel="dns-prefetch">）
• 减少跨域请求
• 使用 CDN 降低解析延迟
• 减少 DNS 查询频次（共享域名）

2. TCP/TLS 连接优化

• 连接复用（Keep-Alive、HTTP/2 多路复用）
• 减少重定向次数
• 减少第三方域名连接数（避免多次三次握手）
• TLS1.3 优化握手过程

3. HTTP 协议优化

• 使用 HTTP/2：
  
• 多路复用（消除队头阻塞）
• 头部压缩
• Server Push（预加载资源）
• 使用 HTTP/3：
  
• 基于 QUIC，减少握手延迟

4. 缓存策略优化

• 强缓存：Cache-Control: max-age、Expires
• 协商缓存：ETag / Last-Modified
• CDN 缓存策略
• 静态资源使用 hash 文件名（内容变动才刷新）

5. 资源加载优化

• 懒加载：图片、视频等资源按需加载（loading="lazy"）
• 预加载 & 预请求：
  
• <link rel="preload">
• <link rel="prefetch">
• 按需加载模块（JS/CSS）

6. 压缩与传输优化

• 启用 Gzip 或 Brotli 压缩文本资源
• 图片压缩优化（WebP、AVIF）
• 雪碧图、SVG 精简、字体子集
• 减少重复包体（第三方库抽离 CDN）

7. 请求合并与去重

• 合并资源：CSS、JS 打包合并（仅适用于 HTTP/1.1）
• 使用图标字体 / 雪碧图减少请求
• GraphQL 替代多个 REST 请求

8. 首屏优化

• 关键资源优先加载（CSS、字体、JS）
• SSR + Hydration 提高 TTFB
• Skeleton + Lazy Render 提高首屏体验
• Critical CSS 提前内联

9. 使用 CDN 加速

• 静态资源分发到最近节点
• 减少回源次数、提高命中率
• 自定义缓存配置策略

10. Service Worker 与离线缓存

• 用于缓存页面资源与接口数据
• 提高重复访问性能
• 提供离线能力（PWA）

11. 性能指标与监控

• TTFB（首字节时间）
• FCP、LCP、FID（核心 Web Vitals）
• Resource Timing API、Navigation Timing API
• 使用 Lighthouse、WebPageTest、Chrome DevTools 分析

面试常见问题示例