前端性能优化&测试
25
浅浅浅浅浅浅浅浅 & 浅浅
description
Transcript of 前端性能优化&测试
浅析前端性能优化 & 测试
!important
• 80% 页面性能在前端
• 时间就是金钱
• 4s 原则
性能指标• 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)
如何度量
1 . 前后端协同
后端接收到请求记录时间并写入页面，前端 onload 记录时间算差值。
存在的问题：
- 服务器和客户端时间不一致，需要处理。
2. 纯前端实现
存在的问题：
- 忽略了请求相关的时间，得到数据比真实数据要小。
3. 前一个页面和当前页面协同
前一个页面点击链接是，记录时间，当前页面 onload 时间相减。
存在的问题：
- 实现较为复杂，第一次自主访问的页面无法测试。
4. 使用浏览器插件或者工具栏 - google toolbar
5. 使用客户端软件 - 哈勃 - webpagetest
存在的问题：
- 通用性小，覆盖面积小。
6. 使用 HTML5 的 Navigation Timing
performance.timing
http://www.tmall.com/test.php
http://www.tmall.com/
优化 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/
• 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/
• reflow & repaint
- reflow 对于 DOM 结构中的各个元素都有自己的盒子 ( 模型 ), 这些都需要浏
览器根据各种样式 ( 浏览器的 , 开发人员定义的等 ) 来计算并根据计算结果将元素放到它该出现的位置 , 这个过程称之为 reflow;
- repaint 当各种盒子的位置 , 大小以及其他属性 , 例如颜色 , 字体大小等都确
定下来后 , 浏览器于是便把这些元素都按照各自的特性绘制了一遍 , 于是页面的内容出现了 , 这个过程称之为 repaint.
- 导致 reflow 和 repaint 的因素
- 添加或删除可见的 DOM 元素
- 元素位置改变
- 元素尺寸改变
- 内容改变
- 浏览器窗口改变
- 避免 reflow 和 repaint 方法
- 尽可能限制 reflow 的影响范围
- 集中改变样式
- 实现元素动画，尽量使之脱离文档流，不影响其他元素
- 避免频繁操作 DOM
- 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.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
• 外部平台
– webpagetest http://webpagetest.org/
– httparchive http://www.httparchive.org/index.php
一切皆权衡 ！
Thanks !
