1. 前端性能测试
天猫性能测试组
馨柔 2012-05

2. 大纲
What？ How?
什么是前端性能 如何做前端性能
测试？ 测试?
How？ How？
怎样判断前端 如何进行前端
性能？ 性能优化

3. 什么是前端性能测试？
服务端性能测试
关注数据的返回、事物的响应所需要花费的时间。
前端性能测试（浏览器端性能测试）
关注浏览器加载、渲染和运行html、css、images、
java script以及flash所需要花费的时间。

4. 如何做前端性能测试？
Text
yslow
in here
fiddler
或者
netlimiter
限制网速
dynatrace

5. fiddler与netlimiter比较
 fiddler
• 一个由微软出品的软件，记录了所有的http通讯的debug工具。他可以
允许你查看所有的http请求，设置断点，监控进出流量数据等，同时
还可以支持几乎所有的浏览器。
• 官方地址：http://www.fiddlertool.com/fiddler/
• 是免费软件
 net limiter 2
• 一个监控软件，可以对整个机器的网络状况进行监控和控制，可以指
定某个特定进程的的网络请求，而不局限于浏览器。
• 官方地址：http://www.netlimiter.com/download.php
• 这个软件的pro版本并不是免费软件

6. yslow、dynatrace比较
 Yslow主要通过分析页面所有加载组件来进行性能检查。它可以分析总
共下载的网页大小、缓存以及Cookies，同时能够统计出所有组件类型
、URL地址、失效日期、压缩状态、装载时间、大小等。
 DynaTrace Ajax Edition主要通过分析页面渲染时间、DOM方法执行
时间、 JavaScript代码的解析时间来进行性能检查。它可以深入分析
JavaScript，可以跟踪JavaScript从执行开始、经过本地的XMLHttpRequest
、发送网络请求、再到请求返回的全过程。

7. DynaTrace Ajax Edition的优势
• DynaTrace Ajax Edition无法忽视的优点：
1) 支持IE浏览器，Yslow是只用于firefox浏览器的。
2) 有独一无二跟踪页面JS执行的能力，还能跟踪到浏览器的DOM，
获取方法的参数和返回值。
3) 可以通过视图来分析JS执行的性能，并可以看到实际的JS代
码。
4) 可以非常清晰地通过时间轴视图显示了时间的花费情况。

8. HotSpot面板视图
• 分析页面内所有的js执行、提供汇总清单、显示所有方法
的性能。

9. PurePath视图
• 显示了所有浏览器的活动，包括Script标签或时间句柄触发
了哪些js的执行，以及网络请求和呈现的时间

10. 怎样鉴定前端性能？
约定明确的前提
用户PC机的软件、硬件配置，以及所处于的网络
状况均会影响前端性能的结果。
Yslow评分标准 Dynatrace评分标准

11. Yslow评分标准（23条）
• 1.Make fewer HTTP requests 减少HTTP请 • 13.Use a Content Delivery Network(DNS)
求数量 利用CDN技术
• 2.Add Expires Header 设置头文件过期 • 14.Compress components with Gzip通过
• 3.Put CSS at Top 把CSS放顶部 压缩合并组件
• 4.Avoid CSS Expressions 避免CSS • 15.Put Scripts at Bottom 把JS放底部
Expressions • 16.Make JavaScript and CSS External 将JS
• 5.Reduce DNS Lookups 减少DNS查找 和CSS外联
• 6. Avoid URL Redirects 避免重定向 • 17.Minify JavaScript and CSS 减小JS和CSS
• 7. Configure entity ETags 配置Etags 的体积
• 8. Use GET for AJAX Requests 用GET方式 • 18. Remove Duplicate JavaScript and CSS
进行AJAX请求 删除重复脚本和css
• 9. Avoid HTTP 404(Not Found) error 不要 • 19. Make Ajax Cacheable 缓存Ajax
出现404页面错误 • 20. Reduce the Number of DOM
• 10. Use Cookie-free Domains 使用无 Elements 减少DOM元素数量
Cookie的域名 • 21. Reduce Cookie Size 减小Cookie
• 11. Don’t Scale Images in HTML 不要在 • 22. Avoid AlphaImageLoader Filters 避免
HTML中缩放图片 过滤器的使用
• 12. Avoid empty src or href 避免不存在 • 23. Make favicon Small and Cacheable 缩
的空路径 小favicon的大小并缓存它

12. Dynatrace评分标准（2部分）
• 1. 4个KPI(Key Performance Indicator) （占60%）
1) first_impression第一印象时间（即出现画面——浏览器的第一次渲染时间发生
时间），基准时间是1s
2) onload事件时间 ，基准时间是2s
3) full_page_load完全加载时间（所有onload的处理函数执行完毕，所有动态或
者延迟加载的内容获取完毕） ，基准时间是2s
4) 请求数量 ，基准数量是40个
• 2. 4个分类评判标准（40%，各占10%）
1) 浏览器缓存 ，允许5个资源不设置cache
2) 网络资源 ，基准是一个域名下允许1个css文件，6张图片，2个js文件
3) JavaScript/Ajax ，基准允许2个js文件，js代码块执行时间允许最长20ms，5个
XHR调用
4) 服务器端 ，基准是6个发往应用服务器请求，每个请求花费的服务器时间不超
过200ms
• 得分： ( 100 – 4个KPI标准中扣去的分数 ) * 60% + 浏览器缓存 * 10% + 网络资源 *
10% + JavaScript/Ajax * 10% + 服务器端 * 10%。

13. 业务标准
• 1.对于业务来说什么是最重要、最关键的
1) 显示？操作？……?
• 2. 最重要、最关键的业务是否可以快速呈现

14. Tmall性能测试结果list
 psize（k）：这是组成网页的所有资源总大小
 first_impression（ms）：首次渲染时间
 onload（ms）：onload事件时间
 full_page_load（ms）：完全载入时间
 server（ms）：直到页面全部加载完成时，服务器获取动态数据加载所
花费的时间
 client（ms）： 直到页面全部加载完成时，花费在javaScript上的时间
 请求数（个）：优秀的网站请求数应小于40，可接受的网站请求数最大
不能超过100，超过100的网站可认为是糟糕的

15. Tmall前端性能测试通过标准
• 1. 从分数上来看：Yslow评分和Dynatrace评分>=85分
• 2. 从页面大小上来看：页面大小<800k
• 3. 从加载时间上来看： first_impression<1s、onload时间<2s
、 full_page_load<2s、onserver<0.3s
• 4. 请求数量<40个

16. 如何做前端性能调优？
 原则一：减少请求的数量
 原则二：减少请求的大小
 原则三：减少请求的内容
 原则四：减少阻塞等待

17. 优化原则一：减少请求数
 合并css、java Script
 css sprite（css合图）
 合并接口请求
 让资源可缓存（通过带随机数、用户名、id、时间等）
 lazyload不需要的东西

18. 案例：过多images,css,js文件
dynaTrace AJAX Edition在Network面板的性能报告中列出了所有
css,images,js文件。还给出了当合并这些资源后减少请求往返节省的
时间。

19. 优化原则二：减少请求大小
 压缩css、java script（inline也是可以压缩的）
 压缩图片
 使用Gzip
 不动的图片尽量使用png8和jpg格式，同时清晰度为80%左右即可

20. 案例：臃肿的图片，css和js文件
dynaTrace AJAX Edition在性能报告中的KPI面板的第一个表格给出
了所有对象的概况。展示了每种mime类型的资源数量、总大小和这
些资源是否被缓存。
减少图片、css和js不仅加速了网站的载入，而且降低了浏览器内存占用和CPU的使用

21. 优化原则三：减少请求内容
 减少dom的节点数量
 删除没有使用的代码
 减少cookie
 适当使用外联的方式（针对inline css、inline js、比较大的内容）

22. 优化原则四：减少堵塞
 合理安排java script、css、图片的顺序
 合理安排同一域名并发请求数（线上是4个）
 尽量避免head部分过重
 合理使用java script

23. 案例：http请求过多
下图是一个网络下载图，很明显从一个域名下载的资源越多，其他单个资源的等待时
间就越长。

24. 前端性能测试的明天
寻找更多、更好、更适合不同浏览器的前端性能测试工具。
将前端性能测试自动化回归起来。
建立第三方flash前端性能的验收标准。
各产品明确主要业务标准。
将实践中前端性能的问题解决方法沉淀下来，形成更完善地前端开发标
准。

25. Thank you！
Q&A