QQ空间亿级服务Web架构
2020-02-27 327浏览
- 1.QQ空间亿级服务 Web架构 刁维康（腾讯）
- 2.刁维康 Web前端⼯工程师@QQ空间
- 3.QQ空间亿级服务Web架构 加速 离线 开放
- 4.为什什么选择留留⾔言板？ ⽇日访问量量⼀一亿+ 第⼀一个从Native → Hybrid
- 5.第⼀一个版本上线，⼀一百多例例⽤用户投诉
- 6.留留⾔言板空⽩白好久才显示出来 更更新后打开留留⾔言板慢死了了
- 7.1. ⾸首屏加载慢
- 8.如何优化⾸首屏速度？ · 减少重定向、DNS查找 · 减少请求数、⽂文件⼤大⼩小 · 使⽤用CDN、⻓长缓存 这些今天都不不讲
- 9.S 0.点击启动 Native 1.初始化 Data Srv Webview 2.调⽤用请求 cgi/webapp 4.显示UI Request 3.http Node Srv 总耗时 = 初始化WV + ⽹网络请求
- 10.S 0.点击启动 Native 1.初始化 Data Srv Webview cgi/webapp 3.显示UI 1.调⽤用请求 Request 2.http Node Srv 总耗时 = Max(初始化WV , ⽹网络请求)
- 11.优化前后对⽐比（ms） WV启动 加载数据 优化前总 优化后总 iOS iOS Andorid AND 400 800 1200 800 800 1200 2000 1200
- 12.优化前后对⽐比（ms） WV启动 加载数据 优化前总 优化后总 iOS iOS Andorid AND 400 800 1200 800 800 1200 2000 1200
- 13.QQ消息能发送，留留⾔言板打不不开 打开留留⾔言板居然有运营商⼴广告
- 14.2. 稳定性和私密性差
- 15.S 0.点击启动 Native 1.初始化 Data Srv Webview cgi/webapp 3.显示UI 1.调⽤用请求 Request 2.socket Node Srv 能聊天就能打开⻚页⾯面
- 16.S 0.点击启动 Native 1.初始化 Webview socket Data Srv cgi/webapp 3.显示UI 1.调⽤用请求 Request 2.socket Node Srv 异步请求的复⽤用⽅方案
- 17.3. ⼆二次打开还不不够快
- 18.⼆二次打开如何更更快？ “利利⽤用缓存”
- 19.S 0.点击启动 Native 1.初始化 Webview 4.更更新UI 1.调⽤用请求 socket Data Srv cgi/webapp 3.显示UI Request 3.请求更更新 Node Srv 4.更更新缓存 2.获取缓存 Cache ⼆二次请求使⽤用缓存提速
- 20.校验本地缓存的有效性？ “ETAG”
- 21.S Request Header 0.点击启动 1.初始化 If-None-Match Webview Native 4.更更新UI 1.调⽤用请求 socket cgi/webapp 3.显示UI Request Response Header 4.更更新缓存 2.获取缓存 Etag Cache Data Srv 3.请求更更新 Node Srv
- 22.⾸首屏耗时对⽐比（单位ms） 4300 3700 HTTP 1600 打开 缓存 2700 400 IOS 1100 安卓 数据来源：来⾃自⼿手机QQ留留⾔言板功能
- 23.异步请求测速和成功率 iOS 成功率 ↑99.9% 测速 ↑ 20% Andorid ↑99.6% 数据来源：来⾃自⼿手机QQ留留⾔言板功能
- 24.离线也能打开
- 25.偶现没样式
- 26.⾸首屏离线后的问题 ⾸首屏html在本地 弱⽹网CSS加载慢 ⾸首屏会⽩白屏 ⾸首屏⽆无样式 ⽆无⽹网CSS加载失败 解决⽅方案：CSS⽂文件内联
- 27.4. ⾸首屏流量量变⼤大
- 28.⾸首屏请求情况 15 % 304 44 % ⾸首次打开 41 % ⼆二次更更新 数据来源：来⾃自⼿手机QQ留留⾔言板功能
- 29.xx的留留⾔言板...内联样式...HTML{ {title} =...内联样式...title:‘xx的留留⾔言板’, + {dynamic}dynamic:‘… ⽤用户内容…’} Templat Data
- 30.S 0.点击启动 Native 1.初始化 Webview 5.更更新UI 1.调⽤用请求 socket cgi/webapp 3.显示UI Request 3.请求更更新 4.合并差异 5.更更新缓存 2.获取缓存 Data Srv Cache 差异化更更新省流量量 Node Srv 计算差异 Diff
- 31.Request Header S 0.点击启动 If-None-Match Webview Native 1.初始化 Template-tag 5.更更新UI Data Srv cgi/webapp 3.显示UI Request 1.调⽤用请求 socket 3.请求更更新 4.合并差异 Node Srv Response Header Response Body 5.更更新缓存 2.获取缓存 Etag Template-tag Cache 计算差异 {template:’ ’,data:‘ ’} Diff
- 32.X 流量量减少 40kb ! 6kb 85% 本地有缓存 41% 命中diff 43% 总流量量降低 15% 数据来源：来⾃自⼿手机QQ留留⾔言板功能
- 33.并⾏行行 通道 缓存 DIFF
- 34.QQ空间亿级服务Web架构 加速 离线 开放
- 35.ServiceWorker
- 36.ServiceWorker 还没有准备好 ServiceWorker还没准备好
- 37.
- 38.离线演示
- 39.Offline Cache S socket/https CDN 6.加载静态资源 0.点击启动 Native 1.初始化 Webview 5.更更新UI 1.调⽤用请求 socket cgi/webapp 3.显示UI Request 3.请求更更新 4.合并差异 5.更更新缓存 2.获取缓存 Data Srv Cache 静态资源离线缓存 Node Srv 计算差异 Diff
- 40.HTTP V.S Socket 用Socket比HTTP慢30%
- 41.QQ空间亿级服务Web架构 加速 离线 开放
- 42.提升第三方App的体验
- 43.第三⽅方应⽤用演示
- 44.桌⾯面快捷打开
- 45.Thank You
