使用yshow分析前端页面性能

2012-11-15 09:03 by dreamhappy, 29 阅读, 1 评论, 收藏, 编辑

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

推荐阅读

一步一步实现网站的多语言版本

说说程序中的日志

如果您觉得文章内容有一定帮助，请点击推荐

 

 

 

 

分类:  JavaScript

标签:  页面优化,  YShow