性能
发布于
性能是让 PWA 感觉像应用而非网页的关键。Core Web Vitals 量化体验（加载、响应性与 视觉稳定性），而 View Transitions、Speculation Rules 等平台原语让 PWA 在视图间过渡动画、 预渲染可能的下一页。Service Worker 缓存把再次访问变为即时加载。
这些条目讲解这些指标、它们的阈值，以及撬动它们的杠杆。
Core Web Vitals（LCP、INP 与 CLS）LCP、INP 与 CLS 各测量什么、第 75 百分位上 2.5 s、200 ms 与 0.1 的阈值、哪些引擎暴露各条目类型，以及 PWA 对每项的可用手段。
View Transitions APIdocument.startViewTransition() 如何为 DOM 拍快照并动画过渡到新状态、ViewTransition 的 Promise、@view-transition 规则与引擎支持。
Speculation Rules API请浏览器预取或预渲染可能下一页的 speculationrules JSON、它的 eagerness 等级、Chrome 的限制，以及它在生产环境中为何仅 Chromium 支持。
应用外壳（app shell）模型应用外壳架构如何把预缓存的界面框架与按路由抓取的内容分开、它依赖的缓存清理，以及与服务端渲染之间的取舍。
前进后退缓存（bfcache）前进后退缓存如何从内存恢复整个页面、哪些监听器和响应头会让页面在各引擎失去资格，以及 notRestoredReasons 如何报告原因。
用动态 import() 做代码拆分动态 import() 如何把 PWA 的 JavaScript 拆成按需加载的分块、按路由、组件与第三方库拆分各省下什么，以及 import() 在哪里被禁止。
字体与图片优化font-display 与 size-adjust 如何控制字体加载期间的文本、loading、fetchpriority 与 picture 如何控制图片抓取，以及哪些引擎能解码 AVIF 与 WebP。
Lighthouse 与已移除的 PWA 类别Lighthouse 审计什么、Chrome 126 中的 Lighthouse 12.0 为何在 Chrome 更改可安装性标准后移除了 PWA 类别，以及该改用什么。
导航预加载与 Service Worker 启动时间为什么 Service Worker 的启动时间会加进导航的 Time to First Byte、导航预加载如何让请求与启动重叠，以及它在什么情况下没有收益。
预缓存策略预缓存如何在安装时把构建期的外壳资源列表填入 Cache Storage、为何每个条目需要修订号或带哈希的 URL，以及 Workbox 清单如何处理这件事。
资源提示（preload 与 preconnect）link rel=preload、preconnect、modulepreload 与 prefetch 各提前启动什么、避免重复抓取的 as 与 crossorigin 规则，以及 Chrome 对未用 preload 的警告。
PerformanceObserver 与绘制计时PerformanceObserver 如何送达 paint、largest-contentful-paint 与 navigation 条目、哪些引擎报告哪些、buffered 标志，以及 workerStart 的含义。
← 返回参考总览。