Qzone 前端 CPU 性能优化

对Qzone而言，我们一方面想要有丰富的功能，另一方面又想要有高性能的体验，这两者是“鱼”与“熊掌”不可兼得呢还是说我们可以尝试去寻找更加科学／更加智能的方式来让这两者取得更好的平衡。于是Qzone团队尝试以更加系统化的方式来解决用户使用Qzone感觉到卡的问题。我们引入了cpu开销的概念，以动态检测cpu开销为基础，提供一套可监控／可对比／可衡量的通用化的解决方案，试图让我们的日益复杂的Qzone拥有更好的用户体验，让用户不再感觉到卡。

Transcript

1. CPU性能优化 by 郭润增
2. About Me
3. GRZ’s Motto： ChOOsing,dOing & enjOying~ 郭润增 广东潮州人 广东工业大学 08年加入Qzone 做过Qzone5.0／6.0／个人中心／Feeds 最近主要在研究Qzone的CPU性能优化 aka. 郭小帅 Rizen Guo
4. Intro
5. 谈什么 • 谈CPU开销优化 不谈什么 • 不谈速度优化 • 谈如何通过工具化 来帮助更多的团队 • 不谈微观的技术细节 •谈宏观的监控与实践 • 不谈这些工具的具体 实现细节
6. Part One
8. 功能 性能
9. 功能 性能
12. 好卡呀！
13. 功能 性能
18. 一直在摸着石头过河
19. 建一座桥
20. Part Two
22. 如何动态检测 浏览器 的CPU开销?
23. CPU
24. 下个定义 浏览器UI线程更新UI和执行JS 任务所需要的系统开销
25. 我们如何捕捉 CPU
26. 人类如何捕捉 风
27. 风向／风速
29. 我们如何捕捉 CPU
30. 猜想
31. CPU负载高
32. 不能及时响应
33. 感觉到卡
34. 假如定点打时间戳
35. 会不会相隔变长
36. Coding...
37. It works! OMG
38. 可视化
39. 时间 百分比 100％ 0％ 延时上限如何定？
40. 100ms Jakob Nielsen
41. 50ms Nicholas C Zakas
42. VML + Canvas
43. 对比任务管理器
44. 一键启动 Engine Start
48. 打开时的开销
49. 稳定后的开销
50. 去掉Flash挂件
51. 新浪微博打开时
52. 新浪微博稳定时
53. That’s it?
54. “有没有用户数据？”
55. Part Three
57. 能否采集用户数据？！
58. 分段上报点数 大于等于100％ 3 大于等于50％ 5 大于等于20％ 16 大于等于0％ 30
59. 计算开销面积 衡量一段时间内的总开销
60. 把用户的CPU开销 上报到数据平台！！
61. 难以忽视的真相 An Inconvenient Truth
63. 15秒内卡的百分比
64. 浏览器的性能对比
65. 一天的数据走势
66. 用户行为对比
67. 衡量性能优化成果
68. 发现一些以前发现不了的问题 5月25号凌晨到底发生了什么事情？
69. 是时候行动了 Hell,it’s about time!
70. Part Four
72. Why now？
73. 我们的举措
75. 通过监控来遏止 新功能或异常 导致的飙升
79. 通过曲线对比来衡量 我们做的优化实践 是否行之有效
80. 去多余的动画效果
81. 去多余的动画效果
82. 去iframe
84. 通过工具来 帮助CP把控性能
85. 发现一些以前发现不了的问题 5月25号凌晨到底发生了什么事情？
86. 性能检测工具
87. 性能检测工具
88. 性能检测工具
89. 通过自动化检测来 排查现网质量有问题 的Flash挂件
90. 通过监控特性的开销 来跟产品Trade Off
91. 合理延后加载
92. 合理延后加载
93. 进入全民关注CPU开销时代
94. Part Five
96. 如何合理调度任务？
97. 拍脑袋
98. 智能调度
99. 任务调度器 通过动态检测CPU开销 来调整同时执行的任务数
100. 创建10000个图片的案例 尽量将CPU开销控制在20％左右
101. 创建10000个图片的案例 尽量将CPU开销控制在60％左右
102. 根据用户机器实际 性能来做差异化服务
103. Flash＋CPU
104. 同样的方式移植到 Flash里也是可行的
105. Flash程序 根据CPU实际开销来 调度任务
107. 封装成为公用的开放 平台性能优化组件 提升Flash App性能
108. JFV＋CPU
109. 一个可以动态检测 当前正在执行的任务 的工具（跨浏览器）
110. Thank You! by Rizen Guo grz@grzcn.com