网络性能优化

浏览器在加载页面时，大量的性能瓶颈集中在资源的请求、传输、解析与执行上。因此，网络层的性能优化主要目标是：减少请求次数、降低资源大小、缩短首屏时间、提升加载体验。 一、请求数量优化 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 到页面加载”这条链路入手，考查在网络传输环节提升页面性能的能力。 ...