阿卡不拉

Appearance

网络性能优化 ✨ ​

要点速览

  • 目标：缩短首屏与交互的加载时间、降低带宽占用、提升资源获取稳定性。
  • 策略：减量（体积/请求数）＋加速（并行/近源）＋缓存（浏览器）。
  • 优先级：首屏关键路径（HTML/CSS/JS）＞静态资源（图片/字体）＞次级页面及长尾资源。

总览与适用场景 ​

  • 打包与传输：减小体积、按需与分包、开启压缩与 HTTP/2（或 HTTP/3）。
  • 分发与缓存：CDN 就近分发、强/协商缓存、版本化资源（文件名 hash）。
  • 资源调度：preload/prefetch、defer/async、雪碧图、HTTP/1.1 多域并行。

注意

  • HTTP/2 场景不再建议雪碧图与多域分散，可能降低多路复用收益并增加队头阻塞风险。
  • 资源提示需审慎使用，避免过度抢占带宽影响关键路径。

减量:打包与体积优化 ​

  • 优化打包体积：移除未使用代码（Tree Shaking）、代码分割（动态 import）、图片与字体压缩。
  • 多目标打包：利用一些打包插件，针对不同的浏览器打包出不同的兼容性版本，这样一来，每个版本中的兼容性代码就会大大减少，从而减少包体积
js
// vite.config.js：示意按需 polyfill 与分包
import { defineConfig } from "vite";
export default defineConfig({
  build: {
    target: ["es2018"], // 现代浏览器
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
});

减量:传输压缩（Gzip/Brotli） ​

现代浏览器支持内容压缩；只要解压开销小于传输节省，压缩即可获益。

js
// Express 启用压缩
const express = require("express");
const compression = require("compression");
const app = express();
app.use(compression()); // 自动根据 Accept-Encoding 选择 gzip/br
app.use(express.static("public", { maxAge: "7d" }));
app.listen(3000);

减量：图片与合并策略（雪碧图） ​

在 HTTP/1.1 下减少请求数（图标合并为雪碧图）；HTTP/2 不建议使用。

加速：CDN 与就近分发 ​

公共库使用知名 CDN，可复用跨站点缓存；自有静态资源上 CDN，就近加速与高可用。

html
<!-- 使用 CDN 的外链资源，同时设置备用本地回退 -->
<script src="https://cdn.example.com/lib.min.js" defer></script>
<script>
  window.lib || document.write('<script src="/lib.min.js" defer><\/script>');
</script>

加速：HTTP/2（多路复用、头部压缩） ​

单连接并行传输多个流，减少队头阻塞；头部压缩降低请求开销。

详细内容参加文章《HTTP 各版本差异》

加速：脚本加载属性：defer / async ​

  • defer：下载与 HTML 解析并行，DOMContentLoaded 前按顺序执行；适合依赖关系。
  • async：下载与解析并行，下载完成立即执行，顺序不保证；适合独立脚本。
html
<script src="/bundle.js" defer></script>
<script src="/analytics.js" async></script>

加速：资源提示：prefetch / preload ​

  • preload：当前页面所需的关键资源提前下载，影响优先级；需与实际使用匹配。
  • prefetch：空闲时下载可能在后续页面用到的资源，优先级低；不阻塞当前渲染。
html
<!-- preload 当前页面关键资源 -->
<link
  rel="preload"
  href="/fonts/Inter.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<!-- prefetch 后续路由资源 -->
<link rel="prefetch" href="/next.chunk.js" as="script" />

详细内容参加文章《浏览器资源提示关键词》

加速：多静态资源域（HTTP/1.1） ​

当无法使用 HTTP/2 时，将独立静态资源分布到多个域以提升并行连接（每域约 6 个连接）。

现代场景的取舍

  • 如已启用 HTTP/2/3，应避免多域与雪碧图；统一域与细粒度资源能更好发挥多路复用与优先级调度。

详细内容参加文章《HTTP 各版本差异》

缓存：浏览器缓存策略 ​

  • 强缓存：Cache-Control: max-age/immutable；命中不发起网络。
  • 协商缓存：ETag 或 Last-Modified；资源变更时更新文件名 hash 触发刷新。
js
// Node 静态资源响应缓存头（示意）
const http = require("http");
http
  .createServer((req, res) => {
    // 根据资源类型设置缓存策略
    if (req.url.endsWith(".js") || req.url.endsWith(".css")) {
      res.setHeader("Cache-Control", "public, max-age=604800, immutable");
    }
    // 写入内容...
    res.end("ok");
  })
  .listen(8080);

详细内容参加文章《浏览器缓存》