YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。安装 YSlow先安装 Firebug https:/addons.mozilla.org/en-US/firefox/addon/1843Firebug 帮助文档 http:/www.getfirebug.com/docs.html.再下载安装 http:/developer.yahoo.com/yslow使用YslowYslow是运行在Firebug窗口下，所有要运行Yslow，必须安装Firebug。有两种方法启动Yslow 1、打开Firebug窗口，选择Yslow选项。 2、直接点击浏览器右下角的Yslow启动按钮。你第一次打开Yslow时，以下图像作为Firebug的一部分被显示在的浏览器窗口。点击 Run Test 运行Yslow，也可以点击 Grade, Components, 或Statistics选项开始对页面的分析。你可以选择 Autorun YSlow each time a web page is loaded 它将自动对以后打开页面进行分析，您也可以右击YSlow状态栏，然后选择或取消自动运行。Yslow视图YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。以下是说明的等级、组件、统计信息。一、等级视图查看一个分析,选择页面的性能等级标签或点击网页的字母等级在状态栏这页纸的底部。视图显示了等级为网页的成绩单。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则(见性能规则)。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。下面是一个等级的例子：如果页面与某一个规则无关，则显示 N/A ，表示不适用。点击每一规则，都给出了改进建议。要查看更全面的改进方法进入前端性能优化指南二、组件视图分组显示页面组件，表格列出组件的信息，点击 Expand All展开显示给个分组内各的组件信息。下面简要列在组件检视表：TYPE：该组件的类型。该网页是由组成部分的下列类型： doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.SIZE(KB)：该组件的大小以千字节。GZIP(KB)：该组件的gzip压缩的大小以千字节。COOKIERECEIVED(bytes)：字节数在HTTP设置的Cookie响应头。COOKIESENT(bytes)：节数的Cookie在HTTP请求报头HEADERS：HTTP信息头，点击放大镜查看全面信息。URL：链接地址EXPIRES(Y/M/D)：日期的Expires头，属于缓存设置一种。RESPONSE TIME(ms)：响应时间ETAG：ETag响应头，也是缓存设置的一种ACTION：额外的性能分析三、统计信息视图左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。我们可以看到，页面元素缓存后的使页面的http请求和页面总大小都减少，从而加快了页面打开时间。参看（页面的缓存设置）YSlow菜单栏一、规则集 1 、YSlow （ 2版） -这一规则集包含了所有22个测试的规则。 2 、精英（ V1导联） -这个规则集包含原始13规则中使用了YSlow 1.0 。 3、小网站或博客-这个规则集包含14个规则，适用于小型网站或博客。参照下方的图片，看看哪一种规则，在这个规则集。请注意，最后选定的规则集成为默认的规则集。默认规则集可以是一个预定义的三个之一或您自己创建的一个。要创建您自己的规则集，单击Rulesets下拉菜单旁边的 Edit 按钮。新的规则集屏幕将显示： 1、点击左侧 New Set 按钮，出现全部22调规则，勾选你所需的 2、点击 Save ruleset as. 保存，会弹出个命名窗口，命名就可以了。 3、你还可以对自定义的规则再次编辑或者删除。YSlow 工具YSlow的工具菜单上提供了多种报告工具，您可以使用获得的信息，以帮助您的网页分析。以下是截图工具菜单：1、JSLintJSLint收集所有外部和内部的JavaScript从目前的网页，提交给JSLint ，一个JavaScript验证，并打开一个单独的窗口了一份报告，存在问题，该网页的JavaScript的。该报告包括大致位置的源代码的问题。很多 时候，这些问题是语法错误，但JSLint寻找风格公约的问题和结构性问题。2、All JS收集所有外部和内部的JavaScript的网页，并显示在一个单独的脚本窗口。您可能想要使用这个工具来查看某个脚本，以及是否实际使用是正确的。3、All JS Beautified将js以人们可读的方式展示。4、All JS Minified收集所有外部和内嵌JavaScript，删除评论和白色空间以缩小的脚本。以改善网页的性能。5、All CSS收集所有的行内和外部的样式表在网页上，并将其显示在一个单独的窗口。6、All Smush.it如果您按一下所有Smush.it ， Smush.it将运行在网页上所有的图片组成。此工具将告诉你该图像可被优化，并创建一个压缩文件，来优化图像。当您选择此工具你会看到输出如下所示：以上就是Yslow的使用指南，结束。Page-speedhttp:/code.google.com/intl/zh-CN/speed/page-speed/download.html先来看界面吧和YSlow一样，“Page Speed”也是一个基于firebug附加组件的FireFox插件。虽然听起来有点拗口，但是意思很容易理解：如果你想用“Page Speed”，那么你就要安装firbug，而firebug是FireFox的一个附加组件，所以你也必须按照FireFox浏览器。同时另外一个意思 是：IE！NO！Sorry！“Page Speed”有两个面板，分别是“Page Speed”面板和“Page Speed Activity”面板。“Page Speed”面板Page Speed附加组件的Page Speed面板 和YSlow使用Yahoo的14条标准来衡量网页的综合速度一样，Page Speed通过Google指定的20条标准来衡量网页的综合速度。而Page Speed面板就是用来展现你的网页在Google20条标准上的得分。“Page Speed”通过分析你的网页加载、呈现速度，用20条标准来衡量，最终告知你的网页速度如何、哪种标准得分多少、问题所在、如何改进等信息。“Page Speed Activity”面板Page Speed附加组件的Page Speed Activity”面板 “Page Speed Activity”面板用于展现你的网页加载各种元素的所用时间，这样，你就可以更明确的知道到底是谁在浪费、占用大量的时间，从而更有针对性的进行改进。不同的阶段占用的时间，用不同的色块进行表示，恩，真是贴心的设计。“Page Speed”的20条衡量标准如果你对YSlow比较熟悉的话，那么一定会知道YSlow用于衡量网页速度的14条标准，而“Page Speed”有20条衡量标准，那么他们之间的到底有什么不同呢？Google又会给我们带来什么新的观点呢？补充一下：如果你对YSlow的14条衡量标准不熟悉的话，您可以阅读一下，我以前写的两篇文章，分别是如何提高网页的效率（上篇）提高网页效率的14条准则和如何提高网页的效率（下篇）Use YSlow to know why your web Slow，文章较为详细的介绍了YSlow这个工具的使用，以及YSlow的14条衡量标准。这两篇文章同时也被收录到了博客园精华集-web标准之道一书当中。继续补充：如果你想非常详细的了解YSlow的14条衡量标准的超详细讲解，那么你可以购买一本书，书的名字叫做：高性能网站建设指南，书的封面是一条经常出现在人与兽一类电影中的那种狗狗。高性能网站建设指南 OK，不扯那么多了，让我们回到正题：“Page Speed”的20条衡量标准到底是什么呢？Put CSS in the document head将你的CSS样式表文件放在整个页面的头部。没有什么难理解的。css先下载下来，就能更快的渲染网页效果。从而让人们感觉网页速度很快。更多关于Put CSS in the document head的更多详细解释，请看官方文档。Use efficient CSS selectors使用效率更高的CSS选择符。举个很简单的例子：尽量不要使用*号选择符：*padding:0;margin:0像这样的得分会很低，正确的办法应该是只对你想设置的标签元素进行设置，例如：html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td margin: 0; padding: 0;如果你对本条有更多的兴趣，可以去看Use efficient CSS selectors官方文档的详细解释。Leverage proxy caching代理缓存。这个名词听起来好像很屌的样子，以至于我也是查了资料才知道：所谓proxy cacheing，就是一种公共缓存，用于静态资源，允许浏览器从最近的代理服务器上，而不是从远程的原始服务器，下载这些静态资源。这些代理服务器，通 常而言就是有ISP，接入服务商所提供的。这样的代理服务器缓存可以让通过同一ISP接入服务的用户共享这些静态资源，而节省原始服务器的带宽，以及下载速度也会大大提高，特别是对于局域网的用户有特别的好处。关于“Leverage proxy caching”的文档资料，请看官方文档的详细解释。Minify JavaScript最小化JavaScript脚本。这个貌似没有什么好说的，压缩一下你的JavaScript脚本吧。关于“Minify JavaScript”的更多文档资料，请看官方文档的详细解释吧。Optimize images优化图片，其实最经常使用的就是css script了，也有翻译为“css精灵”的，虽然翻译的很美好，但是其实很简单，就是将多个图形，放在张图片文件中。这样，可以有效的减少http请求的数量。如果你对“Optimize images”有更多的兴趣，可以看这个。一个cs