YSlow分析網(wǎng)頁(yè),并提出如何提高其性能的基礎(chǔ)上一套規(guī)則,高性能的網(wǎng)頁(yè)。我搜索一下”Yslow使用說(shuō)明“，發(fā)現(xiàn)都是舊版本Yslow的使用介紹。于是翻譯了一下yahoo官方關(guān)于新版Yslow的的使用幫助，希望給初次使用Yslow的朋友一些幫助。

注：英文不是很好，對(duì)著翻譯軟件翻譯的，有不對(duì)的地方，大家指正。

安裝 YSlow

先安裝 Firebug  https://addons.mozilla.org/en-US/firefox/addon/1843

Firebug 幫助文檔 http://www./docs.html.

再下載安裝  http://developer.yahoo.com/yslow

使用Yslow

Yslow是運(yùn)行在Firebug窗口下，所有要運(yùn)行Yslow，必須安裝Firebug。

有兩種方法啟動(dòng)Yslow

       1、打開(kāi)Firebug窗口，選擇Yslow選項(xiàng)。

       2、直接點(diǎn)擊瀏覽器右下角的Yslow啟動(dòng)按鈕。

你第一次打開(kāi)Yslow時(shí)，以下圖像作為Firebug的一部分被顯示在的瀏覽器窗口。

點(diǎn)擊 Run Test 運(yùn)行Yslow，也可以點(diǎn)擊 Grade, Components, 或Statistics選項(xiàng)開(kāi)始對(duì)頁(yè)面的分析。

你可以選擇 Autorun YSlow each time a web page is loaded 它將自動(dòng)對(duì)以后打開(kāi)頁(yè)面進(jìn)行分析，您也可以右擊YSlow狀態(tài)欄，然后選擇或取消自動(dòng)運(yùn)行。

Yslow視圖

YSlow顯示測(cè)試結(jié)果的分析,分為等級(jí)、組件、統(tǒng)計(jì)信息。你可以瀏覽這些觀點(diǎn)之間選擇標(biāo)簽以觀的名字在YSlow標(biāo)簽的Firebug控制臺(tái)。

以下是說(shuō)明的等級(jí)、組件、統(tǒng)計(jì)信息。

一、等級(jí)視圖

　　查看一個(gè)分析,選擇頁(yè)面的性能等級(jí)標(biāo)簽或點(diǎn)擊網(wǎng)頁(yè)的字母等級(jí)在狀態(tài)欄這頁(yè)紙的底部。

視圖顯示了等級(jí)為網(wǎng)頁(yè)的成績(jī)單。整個(gè)字母等級(jí)為頁(yè)面顯示在頂部隨著全面數(shù)值的表現(xiàn)。這個(gè)頁(yè)面是基于22可分級(jí)的高性能網(wǎng)頁(yè)的規(guī)則(見(jiàn)性能規(guī)則)。這些規(guī)則是列在按重要性的順序,從最重要不重要。從 A 級(jí)到 F 級(jí)，A 級(jí)為最高。

下面是一個(gè)等級(jí)的例子：

如果頁(yè)面與某一個(gè)規(guī)則無(wú)關(guān)，則顯示 N/A ，表示不適用。

點(diǎn)擊每一規(guī)則，都給出了改進(jìn)建議。要查看更全面的改進(jìn)方法進(jìn)入前端性能優(yōu)化指南

二、組件視圖

分組顯示頁(yè)面組件，表格列出組件的信息，點(diǎn)擊 Expand All展開(kāi)顯示給個(gè)分組內(nèi)各的組件信息。

下面簡(jiǎn)要列在組件檢視表：

TYPE：該組件的類型。該網(wǎng)頁(yè)是由組成部分的下列類型： doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.

SIZE(KB)：該組件的大小以千字節(jié)。

GZIP(KB)：該組件的gzip壓縮的大小以千字節(jié)。

COOKIE RECEIVED(bytes)：字節(jié)數(shù)在HTTP設(shè)置的Cookie響應(yīng)頭。

COOKIE SENT(bytes)：節(jié)數(shù)的Cookie在HTTP請(qǐng)求報(bào)頭

HEADERS：HTTP信息頭，點(diǎn)擊放大鏡查看全面信息。

URL：鏈接地址

EXPIRES(Y/M/D)：日期的Expires頭，屬于緩存設(shè)置一種。

RESPONSE TIME (ms)：響應(yīng)時(shí)間

ETAG：ETag響應(yīng)頭，也是緩存設(shè)置的一種

ACTION：額外的性能分析

三、統(tǒng)計(jì)信息視圖

 左側(cè)圖表顯示是頁(yè)面元素在空緩存的加載情況，右側(cè)為頁(yè)面元素使用緩存后的頁(yè)面加載情況。我們可以看到，頁(yè)面元素緩存后的使頁(yè)面的http請(qǐng)求和頁(yè)面總大小都減少，從而加快了頁(yè)面打開(kāi)時(shí)間。參看（頁(yè)面的緩存設(shè)置）

一、規(guī)則集

     1 、YSlow （ 2版） -這一規(guī)則集包含了所有22個(gè)測(cè)試的規(guī)則。
     2 、精英（ V1導(dǎo)聯(lián)） -這個(gè)規(guī)則集包含原始13規(guī)則中使用了YSlow 1.0 。
     3、小網(wǎng)站或博客-這個(gè)規(guī)則集包含14個(gè)規(guī)則，適用于小型網(wǎng)站或博客。參照下方的圖片，看看哪一種規(guī)則，在這個(gè)規(guī)則集。

請(qǐng)注意，最后選定的規(guī)則集成為默認(rèn)的規(guī)則集。默認(rèn)規(guī)則集可以是一個(gè)預(yù)定義的三個(gè)之一或您自己創(chuàng)建的一個(gè)。

要?jiǎng)?chuàng)建您自己的規(guī)則集，單擊Rulesets下拉菜單旁邊的 Edit 按鈕。新的規(guī)則集屏幕將顯示：

    1、點(diǎn)擊左側(cè) New Set 按鈕，出現(xiàn)全部22調(diào)規(guī)則，勾選你所需的

    2、點(diǎn)擊 Save ruleset as... 保存，會(huì)彈出個(gè)命名窗口，命名就可以了。

    3、你還可以對(duì)自定義的規(guī)則再次編輯或者刪除。

YSlow 工具

YSlow的工具菜單上提供了多種報(bào)告工具，您可以使用獲得的信息，以幫助您的網(wǎng)頁(yè)分析。以下是截圖工具菜單：

1、JSLint

JSLint收集所有外部和內(nèi)部的JavaScript從目前的網(wǎng)頁(yè)，提交給JSLint ，一個(gè)JavaScript驗(yàn)證，并打開(kāi)一個(gè)單獨(dú)的窗口了一份報(bào)告，存在問(wèn)題，該網(wǎng)頁(yè)的JavaScript的。該報(bào)告包括大致位置的源代碼的問(wèn)題。很多 時(shí)候，這些問(wèn)題是語(yǔ)法錯(cuò)誤，但JSLint尋找風(fēng)格公約的問(wèn)題和結(jié)構(gòu)性問(wèn)題。

2、All JS

收集所有外部和內(nèi)部的JavaScript的網(wǎng)頁(yè)，并顯示在一個(gè)單獨(dú)的腳本窗口。您可能想要使用這個(gè)工具來(lái)查看某個(gè)腳本，以及是否實(shí)際使用是正確的。

3、All JS Beautified

將js以人們可讀的方式展示。

4、All JS Minified

收集所有外部和內(nèi)嵌JavaScript，刪除評(píng)論和白色空間以縮小的腳本。以改善網(wǎng)頁(yè)的性能。

5、All CSS

收集所有的行內(nèi)和外部的樣式表在網(wǎng)頁(yè)上，并將其顯示在一個(gè)單獨(dú)的窗口。

6、All Smush.it

如果您按一下所有Smush.it ， Smush.it將運(yùn)行在網(wǎng)頁(yè)上所有的圖片組成。此工具將告訴你該圖像可被優(yōu)化，并創(chuàng)建一個(gè)壓縮文件，來(lái)優(yōu)化圖像。當(dāng)您選擇此工具你會(huì)看到輸出如下所示：

以上就是Yslow的使用指南，結(jié)束。

轉(zhuǎn)載聲明:

原載：web前端優(yōu)化

本文鏈接：YSlow使用指南