QQ空间亿级服务Web架构

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. <!DOCTYPE html> <html> <head> <title> xx的留留⾔言板 </title> <style> ...内联样式... </style> </head> <body> <!-- dynamic-start -> <div>…⽤用户内容…</ div> <!-- dynamic-end --> <script src=“./ msg.js”> </script> </body> </html> HTML <!DOCTYPE html> <html> <head> { {title} = <style> ...内联样式... </style> </head> <body> title: ‘<title> xx的留留⾔言板 </title>’, + {dynamic} dynamic: ‘<div>… ⽤用户内容…</div>’ <script src=“./msg.js”> </script> </body> </html> } 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还没准备好
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