使用YSlow分析前端页面性能
2012-11-15 09:03 dreamhappy 阅读(2623) 评论(5) 编辑 收藏 举报YSlow是什么
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.
YSlow gives you:
Performance report card
HTTP/HTML summary
List of components in the page
Tools including JSLint
YSlow分析web页面并基于一种高性能网站的规则集对于提高网站页面性能提出建议。YSlow是基于Firefox 的页面开发工具。YSlow基于预先制定的3组规则集或者用户自定义的规则集对页面进行分级。它提供一些提高网站页面性能的建议，分析页面的组成部分，显示页面静态文件，以及提供一些性能分析工具，包括Smush.it和JSLint
在firebug扩展里找到YSlow并安装后，它会显示在firebug选项卡里
开始测试网站
测试结果
综合级别B，算是不错的结果
最左侧列出的平时几项比较所有推荐的优化原则，包括减少http请求，避免空src属性，404页面，使用gzip压缩页面内容等，cnblogs大部分都考虑到了。
现在重点说明几项
1 倾向于使用ajax get请求
When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE's maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.
当使用XMLHttpRequest时，浏览器通过两步实现post请求， (1) 发送头信息 (2) 发送数据。因为get方法是把头信息和数据一起发送的，所以使用get会更好点，除非数据量比较大时，数据量超过一定范围的话，不适合使用get
2 Put JavaScript at bottom
JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.
浏览器在下载js过程过程中会阻断html下载，将js放置于页面底部有利于页面加载。
3 on Use cookie-free domains
When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. To workaround this problem, make sure that static components are requested with cookie-free requests by creating a subdomain and hosting them there.
当浏览器向服务器请求一张静态的图片前,会先发送同域名下的 cookie，服务器对于这些 cookie 不会做任何处理。因此它们只是在毫无意义的消耗带宽。所以你应该确保对于静态内容的请求是无 cookie 的请求。
Use cookie-free domains 的翻译摘自网络，平时开发对于这一项不是很注意
另外提供了Yshow一些工具
JSLint 是一个在线js语法检查工具，根据自己的规则检测js合法性，编写js时可以作为参考
其它的工具用于显示页面所有js，css等功能
使用YShow可以检测页面性能，为我们平时的优化起到一定的参考作用
参考阅读
http://developer.yahoo.com/performance/rules.html#cookie_free
推荐阅读
如果您觉得文章内容有一定帮助，请点击推荐
PS:YSlow不仅仅在Firefox下可以使用，同时兼容很多主流浏览器，详细请查看官网
