https://amatsuzero.github.io/LastStand/tags/%E7%BD%91%E7%BB%9C%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/Recent content in 网络性能优化 on Last StandHugozh-cnWed, 06 Aug 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/network/network-018/Mon, 28 Jul 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/network/network-018/<p>浏览器在加载页面时，大量的性能瓶颈集中在资源的请求、传输、解析与执行上。因此，<strong>网络层的性能优化</strong>主要目标是：<strong>减少请求次数、降低资源大小、缩短首屏时间、提升加载体验</strong>。</p> <h2 id="一请求数量优化">一、请求数量优化</h2> <h3 id="1-合理拆分和合并资源">1. 合理拆分和合并资源</h3> <ul> <li><strong>按需加载（lazy loading / dynamic import）</strong>：不一次加载所有模块，只加载当前页面/功能所需资源。</li> <li><strong>资源合并（资源打包）</strong>：减少请求数量，如合并多个 CSS/JS 文件（现代工具也支持 HTTP2 下保留拆分）。</li> <li><strong>服务端渲染/预渲染</strong>：减轻首屏资源请求压力。</li> </ul> <h3 id="2-使用缓存避免重复请求">2. 使用缓存避免重复请求</h3> <ul> <li>使用浏览器缓存控制（<code>Cache-Control</code>、<code>ETag</code>、<code>Last-Modified</code>）；</li> <li>对于不变资源，设置强缓存（<code>immutable</code>）；</li> <li>对接口返回数据做缓存（前端缓存策略或 HTTP 层缓存）；</li> <li>本地缓存，如 IndexedDB / LocalStorage 存储接口数据。</li> </ul> <hr> <h2 id="二资源体积优化">二、资源体积优化</h2> <h3 id="1-压缩与代码优化">1. 压缩与代码优化</h3> <ul> <li>启用 Gzip / Brotli 压缩静态资源（HTML、CSS、JS）；</li> <li>压缩图像（WebP、AVIF）、字体、视频等媒体资源；</li> <li>减少 polyfill 体积（如使用 <code>core-js</code> 按需引入）；</li> <li>移除无用代码（Tree Shaking、CSS Purge、babel-plugin-transform-remove-console）；</li> </ul> <h3 id="2-精简传输内容">2. 精简传输内容</h3> <ul> <li>请求接口时使用精简字段、分页、后端裁剪；</li> <li>GraphQL 可按需返回字段，减少冗余数据传输；</li> <li>降低 Cookie 和请求头大小，避免请求体负担。</li> </ul> <hr> <h2 id="三加载顺序与优先级优化">三、加载顺序与优先级优化</h2> <h3 id="1-关键资源优先加载">1. 关键资源优先加载</h3> <ul> <li>使用 <code>preload</code>、<code>prefetch</code>、<code>dns-prefetch</code> 等 <code>&lt;link&gt;</code> 标签提示浏览器提前加载；</li> <li>使用 Webpack 的资源预加载配置控制打包 chunk 优先级；</li> <li>首屏资源内联（inline critical CSS）避免阻塞渲染。</li> </ul> <h3 id="2-非关键资源延后加载">2. 非关键资源延后加载</h3> <ul> <li>图片懒加载（<code>loading=&quot;lazy&quot;</code>、IntersectionObserver）；</li> <li>JS 异步加载（<code>&lt;script async|defer&gt;</code>）；</li> <li>第三方 SDK、监控等可延迟初始化。</li> </ul> <hr> <h2 id="四协议与传输层优化">四、协议与传输层优化</h2> <h3 id="1-使用-http2-或-http3">1. 使用 HTTP/2 或 HTTP/3</h3> <ul> <li>多路复用，减少 TCP 连接数，提高并发请求效率；</li> <li>头部压缩与服务器推送（HTTP/2 Push）；</li> <li>HTTP/3 基于 QUIC，有更快的连接建立速度与更少的丢包重传。</li> </ul> <h3 id="2-减少不必要的重定向">2. 减少不必要的重定向</h3> <ul> <li>避免链式跳转；</li> <li>减少使用 302/301 等中间状态跳转，优化首次加载路径。</li> </ul> <hr> <h2 id="五安全策略与跨域优化">五、安全策略与跨域优化</h2> <ul> <li>合理设置 <code>CORS</code>，减少 preflight 请求；</li> <li>使用同源策略时避免冗余 OPTIONS 请求；</li> <li>减少跨域请求带来的额外开销（如 DNS、TLS 握手等）。</li> </ul> <hr> <h2 id="六cdn-与资源分发优化">六、CDN 与资源分发优化</h2> <ul> <li>使用 CDN 加速静态资源访问，减少物理距离造成的 RTT；</li> <li>使用全局 CDN 覆盖，支持边缘缓存与智能调度；</li> <li>配合版本号和 Hash 控制缓存刷新策略。</li> </ul> <hr> <h2 id="七服务端协同优化">七、服务端协同优化</h2> <ul> <li>接口合并：多个小请求可由后端合并为一次大请求返回；</li> <li>接口压缩与限流：避免无用数据占带宽；</li> <li>优化接口响应结构与字段粒度；</li> <li>为前端提供异步批量资源接口（如配置/字典项/用户信息等合并加载）；</li> </ul> <hr> <h2 id="八实际指标与监控优化点">八、实际指标与监控优化点</h2> <ul> <li>首字节时间（TTFB）优化；</li> <li>首屏渲染时间（FCP、LCP）优化；</li> <li>页面总加载时间（Fully Loaded）优化；</li> <li>网络错误率（如资源 404、接口失败率）监控；</li> <li>使用 Performance API、Web Vitals、Lighthouse 工具分析网络瓶颈。</li> </ul> <hr> <h3 id="要点总结">要点总结</h3> <ul> <li>网络优化的本质是：<strong>更快、更少、更智能地请求资源</strong>；</li> <li>从请求数量、资源大小、传输协议、加载优先级、缓存策略、CDN 分发等多个维度同时入手；</li> <li>优化不是单一操作，而是<strong>持续评估、定位瓶颈、迭代调整</strong>的过程；</li> <li>实际开发中建议结合 Chrome DevTools、Lighthouse、Performance API 等工具进行精细化分析与验证。</li> </ul> <h2 id="常见考点">常见考点</h2> <p>前端“网络层面的性能优化”是高频面试考点，涵盖了从资源加载、缓存、连接管理，到协议选择等多个方向。面试时往往从“用户输入 URL 到页面加载”这条链路入手，考查在网络传输环节提升页面性能的能力。</p>