1. 浅析前端性能优化&测试

2. !important
• 80% 页面性能在前端
• 时间就是金钱
• 4s 原则

3. 性能指标
• TTFB (Time to First Byte)
• TTSR (Time to Start Render)
– TTFB
– TTDD (Time To Document Download)
– TTHE (Time To Head End)
• TTDC (Time to Document Complete)
– TTSR
– TTDC (Time to Dom Created)
– TTST (Time to Script)
• TTFL (Time to Fully Loaded)
• TTI (Time to Interact)

4. 如何度量
1 . 前后端协同
后端接收到请求记录时间并写入页面，前端onload 记录时间算差
值。
存在的问题：
- 服务器和客户端时间不一致，需要处理。

5. 2. 纯前端实现
存在的问题：
- 忽略了请求相关的时间，得到数据比真实数据要小。

6. 3. 前一个页面和当前页面协同
前一个页面点击链接是，记录时间，当前页面onload时间相减。
存在的问题：
- 实现较为复杂，第一次自主访问的页面无法测试。

7. 4. 使用浏览器插件或者工具栏
- google toolbar
5. 使用客户端软件
- 哈勃
- webpagetest
存在的问题：
- 通用性小，覆盖面积小。

8. 6. 使用HTML5的Navigation Timing
performance.timing

9. http://www.tmall.com/test.php
http://www.tmall.com/

10. 优化Tips
• Yahoo 34 条军规
http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:34rule
• 图片优化
– 无损压缩
– 格式选择 http://ued.taobao.com/blog/2010/12/10/jpg_png/

11. • Js&css顺序
– 资源是否下载依赖JS执行结果
– JS执行依赖Css最新渲染
– 现代浏览器存在prefetch 优化
http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%B
A%8F%E5%85%B3%E7%B3%BB/

12. • reflow & repaint
- reflow
对于 DOM 结构中的各个元素都有自己的盒子 (模型), 这些都需要浏览
器根据各种样式 (浏览器的, 开发人员定义的等) 来计算并根据计算结果将元素
放到它该出现的位置, 这个过程称之为 reflow;
- repaint
当各种盒子的位置, 大小以及其他属性, 例如颜色, 字体大小等都确定
下来后, 浏览器于是便把这些元素都按照各自的特性绘制了一遍, 于是页面的内
容出现了, 这个过程称之为repaint.

13. - 导致reflow 和 repaint 的因素
- 添加或删除可见的DOM元素
- 元素位置改变
- 元素尺寸改变
- 内容改变
- 浏览器窗口改变

14. - 避免reflow 和 repaint 方法
- 尽可能限制reflow 的影响范围
- 集中改变样式
- 实现元素动画，尽量使之脱离文档流，不影响其他元素
- 避免频繁操作DOM
- Dom操作时可以先移除或隐藏，操作完再插入、显示。
- 创建多个DOM节点，一次性插入

15. • Javascript性能优化
– 使用局部变量
– 缓存频繁使用的对象、数组及相关属性值
– 使脚本尽可能少的运行。
- 短路表达式应用 ， a && b||c
- 基于事件处理相应的处理方法
- 惰性函数

16. - 流程控制
- if语句中，经常会发生的放在靠上位置。
- If条件为连续的区间可以使用二分法拆分
- 离散的判断，可以使用switch
- UI线程
- Js 和 UI更新共享进程
- 100 ms 原则
- 使用定时器让出控制权

17. • css 性能优化
- css渲染时间测试
- 优化建议
· 减少选择符层次
· 慎用通选择符 *
· 慎用滤镜

18. • 感官优化
响应时间与用户体验
0.1 s
- 感觉很顺畅
1.0s
- 用户操作可能会受影响，并能感觉到不顺畅
10s
- 对用户影响比较严重，需要有进度提示，用户会感觉到沮
丧。

19. 眼见的一定为实

20. 小心菊花
延迟0.4 s 使用

21. tools
• Firebug
• Chrome 开发者工具
• Ylsow
• pagespeed
• Fiddler
• Httpwatch
• dynatrace

22. • 内部平台
– 阿里度 http://alibench.taobao.com/index.php
– POC系统 （comming soon…）
– TaoBao ShowSlow http://showslow.taobao.net/
– 鱼眼系统 http://wpo.taobao.net/
– 页面显微镜 http://analytics.corp.taobao.com
– 淘数据 http://dw.taobao.ali.com/index.htm
– 数据门户 http://sg.admin.taobao.org/report/index.htm

23. • 外部平台
– webpagetest http://webpagetest.org/
– httparchive http://www.httparchive.org/index.php

24. 一切皆权
衡 ！

25. Thanks
!