Your SlideShare is downloading. ×
0
浅析前端性能优化&测试
!important• 80% 页面性能在前端• 时间就是金钱• 4s 原则
性能指标• TTFB (Time to First Byte)• TTSR (Time to Start Render)  – TTFB  – TTDD (Time To Document Download)  – TTHE (Time To ...
如何度量1 . 前后端协同     后端接收到请求记录时间并写入页面,前端onload 记录时间算差值。     存在的问题:     - 服务器和客户端时间不一致,需要处理。
2. 纯前端实现  存在的问题:  - 忽略了请求相关的时间,得到数据比真实数据要小。
3. 前一个页面和当前页面协同  前一个页面点击链接是,记录时间,当前页面onload时间相减。  存在的问题:  - 实现较为复杂,第一次自主访问的页面无法测试。
4. 使用浏览器插件或者工具栏   - google toolbar5. 使用客户端软件    - 哈勃 - webpagetest  存在的问题:  - 通用性小,覆盖面积小。
6. 使用HTML5的Navigation Timingperformance.timing
http://www.tmall.com/test.phphttp://www.tmall.com/
优化Tips• Yahoo 34 条军规     http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:34rule• 图片优化 – 无损压缩 – 格式选择 http://ued.taobao.co...
• Js&css顺序    – 资源是否下载依赖JS执行结果    – JS执行依赖Css最新渲染    – 现代浏览器存在prefetch 优化http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss...
• reflow & repaint     - reflow     对于 DOM 结构中的各个元素都有自己的盒子 (模型), 这些都需要浏览器根据各种样式 (浏览器的, 开发人员定义的等) 来计算并根据计算结果将元素放到它该出现的位置, 这...
- 导致reflow 和 repaint 的因素 - 添加或删除可见的DOM元素 - 元素位置改变 - 元素尺寸改变 - 内容改变 - 浏览器窗口改变
- 避免reflow 和 repaint 方法 - 尽可能限制reflow 的影响范围 - 集中改变样式 - 实现元素动画,尽量使之脱离文档流,不影响其他元素 - 避免频繁操作DOM   - Dom操作时可以先移除或隐藏,操作完再插入、显示。 ...
• Javascript性能优化  – 使用局部变量  – 缓存频繁使用的对象、数组及相关属性值  – 使脚本尽可能少的运行。     - 短路表达式应用 , a && b||c     - 基于事件处理相应的处理方法     - 惰性函数
- 流程控制 - if语句中,经常会发生的放在靠上位置。 - If条件为连续的区间可以使用二分法拆分 - 离散的判断,可以使用switch- UI线程 - Js 和 UI更新共享进程 - 100 ms 原则 - 使用定时器让出控制权
• css 性能优化   - css渲染时间测试   - 优化建议   · 减少选择符层次      · 慎用通选择符 *      · 慎用滤镜
• 感官优化     响应时间与用户体验     0.1 s            - 感觉很顺畅     1.0s            - 用户操作可能会受影响,并能感觉到不顺畅     10s            - 对用户影响比较严重...
眼见的一定为实
小心菊花延迟0.4 s 使用
tools•   Firebug•   Chrome 开发者工具•   Ylsow•   pagespeed•   Fiddler•   Httpwatch•   dynatrace
• 内部平台 –   阿里度    http://alibench.taobao.com/index.php –   POC系统 (comming soon…) – TaoBao ShowSlow http://showslow.taobao....
• 外部平台 – webpagetest   http://webpagetest.org/ – httparchive   http://www.httparchive.org/index.php
一切皆权衡 !
Thanks!
Upcoming SlideShare
Loading in...5
×

前端性能优化&测试

905

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
905
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "前端性能优化&测试"

  1. 1. 浅析前端性能优化&测试
  2. 2. !important• 80% 页面性能在前端• 时间就是金钱• 4s 原则
  3. 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. 4. 如何度量1 . 前后端协同 后端接收到请求记录时间并写入页面,前端onload 记录时间算差值。 存在的问题: - 服务器和客户端时间不一致,需要处理。
  5. 5. 2. 纯前端实现 存在的问题: - 忽略了请求相关的时间,得到数据比真实数据要小。
  6. 6. 3. 前一个页面和当前页面协同 前一个页面点击链接是,记录时间,当前页面onload时间相减。 存在的问题: - 实现较为复杂,第一次自主访问的页面无法测试。
  7. 7. 4. 使用浏览器插件或者工具栏 - google toolbar5. 使用客户端软件 - 哈勃 - webpagetest 存在的问题: - 通用性小,覆盖面积小。
  8. 8. 6. 使用HTML5的Navigation Timingperformance.timing
  9. 9. http://www.tmall.com/test.phphttp://www.tmall.com/
  10. 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. 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%BA%8F%E5%85%B3%E7%B3%BB/
  12. 12. • reflow & repaint - reflow 对于 DOM 结构中的各个元素都有自己的盒子 (模型), 这些都需要浏览器根据各种样式 (浏览器的, 开发人员定义的等) 来计算并根据计算结果将元素放到它该出现的位置, 这个过程称之为 reflow; - repaint 当各种盒子的位置, 大小以及其他属性, 例如颜色, 字体大小等都确定下来后, 浏览器于是便把这些元素都按照各自的特性绘制了一遍, 于是页面的内容出现了, 这个过程称之为repaint.
  13. 13. - 导致reflow 和 repaint 的因素 - 添加或删除可见的DOM元素 - 元素位置改变 - 元素尺寸改变 - 内容改变 - 浏览器窗口改变
  14. 14. - 避免reflow 和 repaint 方法 - 尽可能限制reflow 的影响范围 - 集中改变样式 - 实现元素动画,尽量使之脱离文档流,不影响其他元素 - 避免频繁操作DOM - Dom操作时可以先移除或隐藏,操作完再插入、显示。 - 创建多个DOM节点,一次性插入
  15. 15. • Javascript性能优化 – 使用局部变量 – 缓存频繁使用的对象、数组及相关属性值 – 使脚本尽可能少的运行。 - 短路表达式应用 , a && b||c - 基于事件处理相应的处理方法 - 惰性函数
  16. 16. - 流程控制 - if语句中,经常会发生的放在靠上位置。 - If条件为连续的区间可以使用二分法拆分 - 离散的判断,可以使用switch- UI线程 - Js 和 UI更新共享进程 - 100 ms 原则 - 使用定时器让出控制权
  17. 17. • css 性能优化 - css渲染时间测试 - 优化建议 · 减少选择符层次 · 慎用通选择符 * · 慎用滤镜
  18. 18. • 感官优化 响应时间与用户体验 0.1 s - 感觉很顺畅 1.0s - 用户操作可能会受影响,并能感觉到不顺畅 10s - 对用户影响比较严重,需要有进度提示,用户会感觉到沮丧。
  19. 19. 眼见的一定为实
  20. 20. 小心菊花延迟0.4 s 使用
  21. 21. tools• Firebug• Chrome 开发者工具• Ylsow• pagespeed• Fiddler• Httpwatch• dynatrace
  22. 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. 23. • 外部平台 – webpagetest http://webpagetest.org/ – httparchive http://www.httparchive.org/index.php
  24. 24. 一切皆权衡 !
  25. 25. Thanks!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×