PWA在企业级项目中最佳性能优化实践

前端狗

2019/09/18 发布于 技术 分类

文字内容
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:'>ID:'>ID: 1 HTML、JS、 CSS ID:'>ID:'>ID:'>ID: 2 HTML、JS、 CSS ID:'>ID:'>ID:'>ID: 3 HTML、JS、 CSS
37. PWA – SW安装/激活状态 Page Install/ Activate SW SW Cache Browser Cache Online
38. PWA – Precache方案 Head Precache IndexedDB Body Install/ Activate SW SW Cache Page
39. PWA – Precache方案 Head Precache IndexedDB Online Page Body Install/ Activate SW SW Cache
40. PWA – PWA+预缓存策略(优化数据) ü命中率优化 SW Cache 命中率 90 85 80 70 60 50 40 30 20 23 10 0 优化前 优化后
41. PWA – PWA+平台(SSR优化方案) ü 非一级页面 ü 非一级页面预加载方案 ✩ 前置页面,提前安装SW,同时通过下发配置, 预加 载需要缓存的资源,如html、js、css
42. PWA – PWA+平台(SSR优化方案) ü APP内 ü 非一级页面预加载方案 ✩ 前置页面,提前安装SW,同时通过下发配置, 预加 载需要缓存的资源,如html、js、css ü 一级页面预加载方案 空白webview ✩ 进入APP打开空的webview,通过下发配置,预加载 一级页面必须的资源 ✩ 用户可预加载资源存放到IndexedDB
43. PWA – PWA+平台(SSR优化方案) ü 性能优化 ü 非一级页面预加载方案 ✩ 前置页面,提前安装SW,同时通过下发配置, 预加 优化数据 1.6 1.4 载需要缓存的资源,如html、js、css 1.4 ü 一级页面预加载方案 1.2 1.2 ✩ 进入APP打开空的webview,通过下发配置,预加载 1 1 一级页面必须的资源 ✩ 用户 可预加载资源存放到IndexedDB 0.8 0.6 0.6 ü 话题页最终优化数据 0.4 ✩ 1.4s => 1.2s => 1s => 0.6s 0.2 0 优化前 缓存静态资源 缓存HTML 提升命中率 非SSR?
44. 业务现状 目录 PWA缓存策略 SSR+PWA方案 非SSR+PWA方案 更多场景
45. PWA – 非SSR(HTML缓存方案) Page SW Cache Online Return
46. PWA – 非SSR(HTML缓存更新方案) 二次进入优先显示缓存 HTML 更新HTML模板 再次进入先显示原始 HTML模板 非一级入口,能否进入就看 到带数据的HTML? 缓存带数据的HTML
47. PWA – 非SSR(HTML缓存更新方案) ü Puppeteer能做什么? ✩ 抓取网站信息 ✩ 生成截图 ✩ 自动表单提交、UI测试等 ✩ 捕获您的网站的时间线跟踪,以帮助诊断性能问题。 ✩ 变相SSR? ü Puppeteer如何判断页面是否加载完毕 ✩ waitFor ✩ waitForSelector ✩ waitForNavigation ✩ waitForFunction
48. PWA – 非SSR(Puppeteer-SSR) Page SW Cache Return PWA+ P-SSR(HTML) JS、CSS
49. 业务现状 目录 PWA缓存策略 SSR+PWA方案 非SSR+PWA方案 更多场景
50. PWA – 更多使用场景(灰度发布) ü 灰度发布 ✩ 可利用cookie判断是否灰度下发配置 ✩ 可定制灰度判断逻辑
51. PWA – 更多使用场景 ü 文件Diff下发 ✩ 文件BSDiff(差量更新),只下发少量patch与原文 件合成新文件 ✩ 配合Precache提升性能 ü 接口预加载 ✩ 接口预加载,提前获取数据 ü 。。。 ✩ 。。。