PWA-PLUS: “可能是目前最全面的基于sw缓存的性能优化方案”
2021-06-10 08:13:20
PWA-PLUS 是一个基于 Service Worker 缓存的全面性能优化方案，覆盖 HTML 直出与非直出场景，解决了传统方案在场景覆盖、并发限制和更新机制上的痛点，并通过实时缓存更新和代理请求机制显著提升了页面首屏加载速度。
一、方案背景与痛点传统性能优化手段（如预加载、懒加载、雪碧图）在服务端渲染后仍无法实现页面秒开，主要受限于以下问题：
- 场景覆盖不足：依赖客户端能力的缓存方案（如 Sonic、离线包）在微信、浏览器等第三方场景下失效，导致分享页体验差。
- 并发限制：资源并发数增加时，加载时间线性增长。
- 更新延迟：本地资源更新依赖客户端拉取间隔（10-15分钟），可能引发多版本共存问题。
全场景覆盖
支持安卓、iOS 11.3+（Safari）、PC 端（除 IE 外）的绝大多数浏览器，突破第三方应用场景限制。
并发与线程优化
Service Worker 请求并发机制与浏览器一致，且运行于独立线程，避免阻塞主线程。
实时更新机制
通过配置下发缓存文件列表，实现资源实时更新，无需依赖客户端拉取间隔。
存储空间管理
Cache 空间按域名划分，Chrome 上限为可用空间的 6%（LRU 逐出策略），Safari 上限 <50MB，移动端受机器剩余空间和 App 分配空间影响。
- 构建阶段：
使用 @tencent/pwa-plus-plugin 插件提取构建产物，生成 pwa-manifest.json 并同步至配置平台。
- 线上环境：
首次访问：Service Worker 获取 PWA 开关状态及缓存资源列表，请求并缓存资源。
二次访问：代理所有请求，优先使用本地缓存。
- 首次访问：缓存带 DOM 节点和数据的 HTML 文档。
- 二次访问：
拦截 HTML 请求，返回缓存文档并并行请求最新 HTML。
浏览器解析缓存文档，JS 通过 __initialState 与 Service Worker 通信获取最新数据。
页面用最新数据更新内容。
- 紧急修复：关闭 PWA 开关强制刷新，避免问题缓存。
- 首次访问：数据加载完成后，将 outerHTML 传递给 Service Worker 缓存。
- 二次访问：
拦截 HTML 请求，返回缓存文档并并行请求最新 HTML。
浏览器解析缓存文档，请求 CGI 更新数据。
Service Worker 对比 HTML 的 hash，非最新则替换缓存。
- 直出页面：首屏时间优化 300ms。
- 非直出页面：首屏时间提升 500ms。
PWA-PLUS 通过 Service Worker 实现了全场景覆盖、实时更新和并发优化，结合直出/非直出场景的定制化缓存策略，显著提升了页面加载性能，为前端性能优化提供了可复用的解决方案。
热门标签
