PWA在企业级项目中最佳性能优化实践
2020-03-01 206浏览
- 1.PWA在企业级项目中最佳性能优化实践 梁伟盛 腾讯高级工程师
- 2.自我介绍 梁伟盛（大圣）--- 腾讯高级前端工程师 2015年加入腾讯，现任NOW直播/腾讯直播Web技术 负责人 IVWEB团队负责人之一，团队致力于新技术的布道以及 行业交流分享。
- 3.业务现状 目录 PWA缓存策略 SSR+PWA方案 非SSR+PWA方案 更多场景
- 4.业务现状 首屏性能 手Q下业务性能：900ms 38% 非手Q业务性能：1.4s 62% 手Q 非手Q
- 5.业务现状 -- 手Q优化内策略 手Q下业务性能：900ms • 静态资源缓存方案 • 首屏html缓存方案 • 加速首屏展示
- 6.业务现状 -- 非手Q优化内策略 非手Q下业务性能：1.4s • React同构SSR • Service Cache • 如何利用PWA的缓存能力优化 页面的性能？
- 7.PWA -- Browser Cache vs SW Cache VS PWA可以为所欲为
- 8.业务现状 目录 PWA缓存策略 SSR+PWA方案 非SSR+PWA方案 更多场景
- 9.PWA – SW未安装状态 Page Install SW SW Cache Browser Cache Online
- 10.PWA – SW已安装状态 Page Activate SW SW Cache Online Browser Cache
- 11.PWA – SW Cache(其他) ü 缓存策略 ✩ Cache-first：有缓存的时候返回缓存，没有缓存才会去请求并且把请求结果缓存 ✩ Stale-while-revalidate：如果有可用的缓存版本，则使用该版本，但下次会获取更新。 ✩ Network-first：现网超时后返回缓存 ✩ Cache-only：只读取缓存，没有就失败了 ✩ Network-only：只请求线上，不读写缓存
- 12.PWA – SW Cache(Cache-first) ü 有缓存的时候返回缓存 Page SW Cache Browser Cache Return
- 13.PWA – SW Cache(Cache-first) ü 有缓存的时候返回缓存 ，没有缓存才会去请求并且把请求结果缓存 Page SW Cache Browser Cache Cache Online Return
- 14.PWA – SW Cache(Stale-while-revalidate) ü先走缓存，走完缓存以后它会发出请求，请求的结果会用来更新缓存 Page SW Cache Browser Cache Cache Online Return
- 15.PWA – 业务接入情况（Mobile） ü 基于离线包方案，缓存静态资源 优化效果 1.45 1.4 1.4 1.35 1.3 1.25 1.2 1.2 1.15 1.1 优化前 优化后
- 16.PWA – 业务接入情况（PC） ü 基于离线包方案，缓存静态资源 ✩ 接入后：+50ms？ ✩ 优先返回SW Cache Request ü SW Cache获取过程 ✩ CacheStorage.open(); 获取Cache对象实例 ✩ CacheStorage.match(); 获取缓存 ✩ return cache; 返回缓存（走磁盘IO） Browser Cache SW Cache Online SW Cache 80 70 70 60 50 50 40 40 30 20 20 10 0 10KB 20KB 30KB 系列 1 40KB
- 17.PWA – SW Cache(Cache-race) ü 在SW中同时发起online与SW Cache请求，哪个快返回哪个 Page SW Cache SW Online Return
- 18.PWA – SW Cache(Cache-race) ü 在SW中同时发起online与SW Cache请求，哪个快返回哪个 Page SW Cache SW Online 实际情况耗时没有变化 Return
- 19.PWA – 静态缓存策略 ü 移动端 ✩ APP对Browser Cache处理方式不一致 ✩ 建议静态资源上SW Cache ü PC端 ✩ Disk Cache 1-5ms ✩ Memory Cache 0-1ms ✩ 非离线刚需，不建议上
- 20.业务现状 目录 PWA缓存策略 SSR+PWA方案 非SSR+PWA方案 更多场景
- 21.PWA – HTML缓存（SSR-Browser Cache） ü Browser Cache，有缓存情况 Page Browser Cache Return
- 22.PWA – HTML缓存（SSR-Browser Cache） ü Browser Cache，无缓存情况 Page Browser Cache Online Return
- 23.PWA – HTML缓存（SSR-Browser Cache） ü Browser Cache（BUG） Page Browser Cache Eeturn 无法及时更新修复BUG！
- 24.PWA – HTML缓存（SSR-SW Cache） ü SW Cache Page SW Cache Online Return
- 25.PWA – HTML缓存（SSR-SW Cache） ü SW Cache（BUG） Page SW Cache Reload SW Cache
- 26.PWA – HTML缓存（SW Cache优化数据） ü 缓存HTML方案 优化数据 1.6 1.4 1.4 1.2 1.2 1 1 0.8 0.6 0.4 0.2 0 优化前 缓存静态资源 缓存HTML
- 27.PWA – SSR缓存方案 ü 静态资源 ✩ 使用Cache-first ✩ 如何快速新增/删除需要缓存的资源？ ü HTML ✩ 使用stale-while-revalidate ✩ 缓存了一个有BUG的html，由于缓存问题，如 何快速迭代？
- 28.PWA – SSR缓存方案（PWA+平台） ü 静态资源 ü PWA+平台 ✩ 使用Cache-first ✩ 如何快速新增/删除需要缓存的资源？ ü HTML ✩ 随时可修复更新BUG缓存 ✩ 使用stale-while-revalidate ✩ 缓存了一个有BUG的html，由于缓存问题，如 何快速迭代？ ü 话题页优化数据 ✩ 1.4 => 1.2 => 1 ✩ 还有没有优化空间？ ✩ 按需缓存资源
- 29.PWA – 继续探索优化 ü 缓存SW未安装 Page Install SW SW Cache Browser Cache Online
- 30.PWA – 继续探索优化 ü 缓存SW未安装，只能加载线上资源 Page Install SW SW Cache Browser Cache Online
- 31.PWA – 当前SW Cache命中率 命中率 ü 命中率统计 ✩ 命中缓存占比23% ✩ 提升命中率就可以降低首屏耗时？如何提升？ ✩ 一级入口、二级入口？ 23% 命中缓存 没有命中缓存
- 32.PWA – 如何提升命中率 ü 预缓存策略 ✩ 预缓存静态资源 ✩ 预缓存HTML资源 ü 一级页面
- 33.PWA – 资源预加载策略 ü 一级入口预加载二级页面资源 Page HTML SW Config CSS JS
- 34.PWA – 资源预加载策略 ü 一级入口预加载二级页面资源 Page HTML SW Config CSS JS ü 问题思考 ✩ 页面资源变更，如何及时更新？ ✩ 一级页面关联的二级页面比较多？每次只能发布来进行Config修改？
- 35.PWA – PWA+平台预加载策略 ü 构建打通 ü PWA+平台 ✩ 业X务构建PWA+平台打通，页面所需加载 资源文件名会同步到PWA+平台中 ü 业务ID关系 ✩ 业务可绑定多个业务ID ✩ 根据当前ID，PWA+平台下发其绑定业务 ID相对应的资源文件，SW对资源进行一一 预加载 构建自动同步 可绑定多个ID
- 36.PWA – PWA+预缓存策略 Page SW PWA+ID:'>ID:
