Downloaded 33 times
Uploaded bytbmallf2e
前端性能测试
文档讨论了前端性能测试的定义和方法，重点介绍了使用工具如Fiddler、YSlow和Dynatrace进行性能评估。它还提供了性能优化的原则，如减少请求数量、请求大小和请求内容，并讨论了如何判断前端性能及其评分标准。最后，文档展望了前端性能测试的未来发展方向。
前端性能测试
- 1. 前端性能测试 天猫性能测试组 馨柔 2012-05
- 2. 大纲 What？ How? 什么是前端性能 如何做前端性能 测试？ 测试? How？ How？ 怎样判断前端 如何进行前端 性能？ 性能优化
- 3.
- 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.
- 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(KeyPerformance 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.
- 19. 优化原则二：减少请求大小 压缩css、java script（inline也是可以压缩的） 压缩图片 使用Gzip 不动的图片尽量使用png8和jpg格式，同时清晰度为80%左右即可
- 20.
- 21. 优化原则三：减少请求内容 减少dom的节点数量 删除没有使用的代码 减少cookie 适当使用外联的方式（针对inline css、inline js、比较大的内容）
- 22. 优化原则四：减少堵塞 合理安排java script、css、图片的顺序 合理安排同一域名并发请求数（线上是4个） 尽量避免head部分过重 合理使用java script
- 23.
- 24.
- 25. Thank you！ Q&A