腾讯NOW直播极限优化实践

2020-02-23 378浏览

  • 1. 探索H5性能天花板 腾讯NOW直播极限优化实践 腾讯 IVWEB 谢清贵 NOW直播
  • 2. 个⼈人简介 2014年年 携程 旅游事业部 2017年年 ~ ⾄至今 腾讯 • 腾讯NOW直播 • IVWEB成员 • 主要负责移动Hybrid APP内业务以及前端性能优化 https://ivweb.io/
  • 3. APP开发演进 迭代缓慢 必须跟客户端版本 开发&学习成本较⾼高 安卓&iOS需要两端分别开发⼀一套 客户端安装包很⼤大 所有业务都必须打包 原⽣生 Hybrid APP H5⻚页⾯面打开速度慢 ⽤用户等待⽩白屏时间⻓长
  • 4. 原⽣生 H5
  • 5. ⽤用户点击到显示⾸首屏的过程 JS下载 + 执⾏行行 WebView耗时 HTML loaded 505ms Click Start DOM渲染 ⻚页⾯面渲染成功 JS执⾏行行完成 600ms CSS 解析完成 CSS下载 + 解析 1155ms 1555ms CGI数据拉取成功 CGI请求耗时 1700ms
  • 6. ⾸首屏耗时分布 1 3 2 为何耗时这么⻓长？
  • 7. 01 优化WebView耗时
  • 8. WebView优化⽅方案 ⻚页⾯面预加载 打开当前⻚页⾯面的同时，提前预加载其他⻚页⾯面
  • 9. ⻚页⾯面预加载 10+个⻚页⾯面 预加载多少个⻚页⾯面？ • 预加载左右N个 • N = f(cpu, 内存, 机型…) • f可以是阶段函数 什什么时机开始预加载其他⻚页⾯面？ • 等待当前⻚页⾯面完全加载成功后，开始预加载 • 固定延时（如2s）后，开始预加载
  • 10. ⻚页⾯面预加载— 效果
  • 11. 存在的问题 ⽐比较浪费⽤用户流量量 对机器器的性能要求很⾼高 对未被预加载的⻚页⾯面⽆无效
  • 12. WebView优化⽅方案 ⻚页⾯面预加载 打开当前⻚页⾯面的同时，提前预加载其他⻚页⾯面 WebView H5框架预加载 只预加载框架部分，前端异步加载js并执⾏行行业务逻辑
  • 13. 客户端打开⻚页⾯面 预加载框架 前端渲染
  • 14. 预加载框架 Before Click 初始化 WebView loadUrl(framework.html) 预加载框架
  • 15. H5⻚页⾯面拆分 framework.html 公共HTML部分（⻚页⾯面结构，公共CSS等） H 5 ⻚页⾯面业务CSS ⻚页⾯面业务JS 业务
  • 16. H5⻚页⾯面拆分 — framework.html 1 公共CSS 2 容器器 ⼊入⼝口函数 3
  • 17. H5⻚页⾯面拆分 — 业务 业务CSS 业务JS
  • 18. 客户端打开⻚页⾯面 Click Start 创建 WebView loadUrl(index.html)
  • 19. 客户端打开⻚页⾯面 WebView (framework.html) getCurrentUrl —> url Click Start Use Loaded WebView 获取当前被点击⻚页⾯面的真实URL 读取配置 —> config 从离线包读取当前⻚页⾯面对应的配置信息 通知前端 __startLoad(url, config)
  • 20. 前端渲染 pushState(url) 改变当前⻚页⾯面的url同时不不刷新⻚页⾯面 __startLoad(url, config) css loader 加载和解析业务css js loader 加载和执⾏行行业务js ⻚页⾯面渲染
  • 21. WebView H5框架预加载— 效果
  • 22. 02 优化JS加载&执⾏行行 耗时
  • 23. 优化JS加载⽅方案 PWA 利利⽤用离线缓存的特性 离线包 静态资源APP内置
  • 24. 离线包机制 WebView资源请求 客户端拦截请求 通过_bid参数查找本地⽂文件 有 ⽆无 返回本地⽂文件资源 继续⾛走线上请求 Response
  • 25. 优化JS执⾏行行⽅方案 优化框架 升级框架库，剔除⽆无⽤用模块等 优化代码 常⽤用移动端优化⼿手段等 优化效果⼀一般
  • 26. 优化JS执⾏行行⽅方案 优化框架 升级框架库，剔除⽆无⽤用模块等 优化代码 常⽤用移动端优化⼿手段等 前端本地缓存 将上⼀一次的HTML⽚片段和数据缓存到本地
  • 27. 前端本地缓存 前端缓存HMTL + Data 缓存⾸首屏的HMTL⽚片段和数据 ⻚页⾯面打开时，采⽤用本地缓存渲染 需要设置redux的initialState，否则会出现⼀一次刷新 ⻚页⾯面渲染后更更新本地缓存 在合适的时机点更更新
  • 28. 前端本地缓存 缓存机制： • 客户端提供存储缓存的jsbridge（set） • 客户端以内存和离线⽂文件的形式存在 • 客户端提供获取缓存的jsbridge（get）
  • 29. 优点VS缺点 ⾸首屏时间 ≈ WebView loadUrl时间 ⾸首屏完全省去JS下载和执⾏行行时间 + CGI拉取数据时间，⻚页⾯面秒开 不不适⽤用于数据频繁更更新的场景 如直播场景等 ⾁肉眼可以感知的画⾯面重绘 由缓存HTML到最新数据render会有⼀一次画⾯面刷新
  • 30. 03 优化数据拉取耗时
  • 31. 优化⽅方案 客户端预加载接⼝口数据 客户端提前帮忙预加载接⼝口数据
  • 32. 客户端预加载接⼝口数据 loadUrl CSS&JS 数据 渲染 Click Start 预加载数据 并⾏行行
  • 33. 客户端预加载接⼝口数据 充分利利⽤用WebView打 开和js加载执⾏行行等待 的这段时间
  • 34. ⼩小结 优化WebView耗时 优化JS加载&执⾏行行 耗时 优化数据拉取耗时 ⻚页⾯面预加载 PWA 客户端CGI预加载 WebView H5框架预加载 离线包 前端本地缓存
  • 35. 谢谢聆听！ 微信公众号 QQ交流群 Github：https://github.com/feflow/feflow 更更多⼲干货，请扫码加⼊入腾讯IVWEB交流群 官⽅Github：https://github.com/iv-web