腾讯NOW直播极限优化实践

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