腾讯NOW直播极限优化实践

腾讯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

联系我 - 工具首页
Copyright © 2011-2019 iteam. Current version is 2.57.1. GMT+0800, 2019-11-22 06:10
浙ICP备14020137号 $访客地图$