性能
发布于
性能是让 PWA 感觉像应用而非网页的关键。Core Web Vitals 量化体验——加载、响应性与 视觉稳定性——而 View Transitions、Speculation Rules 等平台原语让 PWA 在视图间过渡动画、 预渲染可能的下一页。Service Worker 缓存把再次访问变为即时加载。
这些条目讲解这些指标、它们的阈值，以及撬动它们的杠杆。
Core Web VitalsLCP、INP 与 CLS——各自衡量什么、第 75 百分位的良好阈值，以及 PWA 特有的杠杆。
View Transitions用 document.startViewTransition() 和 view-transition 伪元素树在 DOM 状态间动画过渡。
Speculation Rules API在 speculationrules script 块中声明预取/预渲染规则、eagerness 级别，以及为何其支持以 Chromium 为主、Safari 仅实验性支持 prefetch。
应用外壳（app shell）模型应用外壳模式如何把页面的标记、样式、脚本与图片缓存进 service worker，让重复访问能即时渲染 UI 外框，再填充内容。
前进后退缓存（bfcache）：即时的前进后退导航前进后退缓存如何在内存中保存整页快照——包括 JavaScript 堆——从而让前进后退导航能够即时恢复页面；为何 unload 监听器在部分浏览器中可能阻止其可用性；以及如何用 pageshow 事件的 persisted 属性检测一次 bfcache 恢复。
在 PWA 中用动态 import() 做代码拆分动态 import() 如何拆分打包体、让启动加载更少 JavaScript，它对 INP 与 LCP 的影响，以及 PWA 中哪些地方不能用。
字体与图片优化：font-display、picture 与 AVIF/WebPfont-display CSS 描述符如何在网络字体加载期间控制文本可见性，img 的 loading 与 fetchpriority 属性以及 picture 元素如何控制图片的加载时机与方式，以及根据 MDN，AVIF 与 WebP 相比 JPEG 和 PNG 能压缩得更小。
Lighthouse PWA 审计Lighthouse 可审计页面的性能、无障碍与 SEO；但其 PWA 类别已被移除，因为这些检查与 Chrome 的可安装性标准直接相关。
作为性能修复手段的导航预加载：在 service worker 启动的同时发出网络请求为何 service worker 的启动时间（根据 web.dev，桌面端通常约 50ms，移动端可达数百毫秒）会计入导航请求的 Time to First Byte；启用导航预加载后浏览器如何在 worker 仍在启动时就发出网络请求；以及它何时有效、何时无效。
预缓存策略：提前把应用外壳送达预缓存如何在 service worker 安装期间填充缓存，让 PWA 的外壳即时且离线加载——哪些该预缓存、哪些该运行时缓存，为何内容修订至关重要，以及 Workbox 的预缓存清单如何将其自动化。
资源提示：rel="preload" 与 rel="preconnect"用 rel="preload" 提前获取特定资源与用 rel="preconnect" 预热连接之间的区别，让 preload 避免二次请求的 as/crossorigin 属性，以及根据 MDN 二者均已 Baseline 广泛可用。
启动性能：绘制与导航计时用 first-paint、first-contentful-paint 这两个 paint 条目以及导航计时里程碑，测量用户在看到应用内容之前要等多久。
← 返回参考总览。