前端性能测试
- 2. 大纲
What？ How?
什么是前端性能 如何做前端性能
测试？ 测试?
How？ How？
怎样判断前端 如何进行前端
性能？ 性能优化
- 4. 如何做前端性能测试？
Text
yslow
in here
fiddler
或者
netlimiter
限制网速
dynatrace
- 7. DynaTrace Ajax Edition的优势
? DynaTrace Ajax Edition无法忽视的优点：
1) 支持IE浏览器，Yslow是只用于firefox浏览器的。
2) 有独一无二跟踪页面JS执行的能力，还能跟踪到浏览器的DOM，
获取方法的参数和返回值。
3) 可以通过视图来分析JS执行的性能，并可以看到实际的JS代
码。
4) 可以非常清晰地通过时间轴视图显示了时间的花费情况。
- 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%。
