Web性能速览

March 24, 2025

主动缓存

HTTP 缓存机制

Cache-Control
Etag/Last-Modified

Service-Worker 缓存（建议使用库，代码仅演示）

sw.js

const addResourcesToCache = async (resources) => {
    const cache = await caches.open("v1");
    await cache.addAll(resources);
};

self.addEventListener("install", (event) => {
    event.waitUntil(addResourcesToCache(["/", "/index.html", new Request("/style.css")]));
});

self.addEventListener("fetch", (event) => {
    event.respondWith(caches.match(event.request));
});

Service Worker 具备很多缓存高级特性，超出本文范畴

TTFB，速度

performance-navigation-timing-timestamp-diagram

避免重定向（如 HSTS）

使用 CDN，边缘服务器

使用 HTTP/2 HTTP/3 （队头阻塞问题）

服务器使用流式响应，无论是否是 SSR

预请求/预缓存，优化请求发现/资源提示

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://example.com">
<link rel="preload" href="/lcp-image.jpg" as="image">
<link rel="modulepreload" href="script.mjs" />

下面属于预渲染，非首次请求

<link rel="prefetch" href="/next-page.css" as="style">
<script type="speculationrules">
    {
        "prerender": [],
        "prefetch": []
    }
</script>

HTTP/2 资源推送（成本可能较高）

避免导致无法资源发现，如：CSS @import，动态创建 script 标签等

资源大小/请求数量

使用 HTTP 压缩机制（Content-Encoding）：gzip / deflate / br / zstd

压缩代码，图片等资源。使用压缩效果更好的格式，如 webp

代码拆分，避免请求首屏不需要的代码：

按路由拆分
按组件拆分
Vendor 拆分

树摇，移除未使用的脚本和样式（对于 Webpack/Rollup 的脚本，必须使用 ESM）

减少请求数量：考虑内联图片，内联关键 CSS；使用 bundler 合并代码（即使是 HTTP/2），减少对不同源的请求

正确使用 polyfill（渐进式增强），可使用 browserslist 工具确定目标浏览器

FCP

优化渲染关键路径，减少阻塞（主线程）渲染的资源，尽快呈现内容（减少白屏时间）

CSS 加载不会阻塞 DOM 解析，但会阻塞 DOM 树的生成与渲染；阻塞 JS 的执行（当然不阻塞 JS 解析）
同步 JS 会阻塞 DOM 和 CSSOM 解析

避免 DOM 规模过大，降低 CSS 选择器的复杂性，减少要设置样式的元素数量

考虑 SSR，预渲染（指构建 HTML 骨架屏）等

LCP

懒加载/延迟加载非关键资源 <img loading="lazy"> <iframe loading="lazy">（Intersection Observer 或相关 JS 库）

请求优先级，合理使用 fetchPriority

避免 DOM 规模过大（无论是 SPA 还是 SSR/MPA，可考虑分页）

TTI

a-page-load-timeline-show

SSR 等技术可能会导致网页出现以下情况：看上去可互动（即屏幕上会显示链接和按钮），但实际上不是可交互的，因为主线程处于阻塞或因为控制这些元素的 JavaScript 代码尚未加载。

SSR 水合 (Hydration) 优化：

减少水合的代码量：只水合必要的组件，并避免水合整个应用程序。
渐进式水合：按需水合组件，而不是一次性水合所有组件。
并行水合：并行水合多个组件，加快水合速度。

CLS

避免由于图片等资源未正确分配空间导致的布局偏移（Layout Shift）

避免 FOUC，保证样式、字体资源加载顺序合理（font-display: swap）

使用高性能动画（即提升渲染到合成器层），避免使用会触发布局或绘制（回流重绘）的属性

INP

INP 指标已替代 FID 指标

优先使用 CSS 动画而不是 JS 动画

避免在同一帧中多次变更 DOM 并查询布局（强制回流），这会导致破坏布局快速路径，导致布局抖动（Layout Thrashing）（方法：考虑使用 requestAnimationFrame）

避免使用 useLayoutEffect，防止阻塞当前帧渲染

将 DOM 无关的高昂计算操作卸载到 Web Worker

考虑使用防抖与节流

使用 KeepAlive 缓存 DOM（优化路由切换），对于 React 则正确使用 useMono，useCallback 等机制

考虑使用虚拟滚动（避免 DOM 规模过大）

任务调度/拆解，使用 Prioritized Task Scheduling API（或类似 React Scheduler 的调度机制）

性能采集

web-vitals：LCP CLS INP (TTFB FCP)

Performance API

Lighthouse、WebPageTest 工具
第三方 Real User Monitoring (RUM) 工具监控

参考

https://web.dev/learn/performance
https://developer.chrome.com/docs/lighthouse/performance/

案例研究：
https://largeapps.dev/case-studies/advanced/

←Back to home

This work is licensed under CC BY-NC-SA 4.0