YSlow使用指南_最新2.0使用指南中文版

YSlow分析網頁,并提出如何提高其性能的基礎上一套規則,高性能的網頁。我搜尋一下”Yslow使用說明“，發現都是舊版本Yslow的使用介紹。于是翻譯了一下yahoo官方關于新版Yslow的的使用幫助，希望給初次使用Yslow的朋友一些幫助。

注：英文不是很好，對着翻譯軟體翻譯的，有不對的地方，大家指正。

使用Yslow

Yslow是運作在Firebug視窗下，所有要運作Yslow，必須安裝Firebug。

有兩種方法啟動Yslow

       1、打開Firebug視窗，選擇Yslow選項。

       2、直接點選浏覽器右下角的Yslow啟動按鈕。

你第一次打開Yslow時，以下圖像作為Firebug的一部分被顯示在的浏覽器視窗。

<a href="http://www.yslow.net/attachments.php?aid=281"></a>

點選 Run Test 運作Yslow，也可以點選 Grade, Components, 或Statistics選項開始對頁面的分析。

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壓縮的大小以千位元組。

COOKIE RECEIVED(bytes)：位元組數在HTTP設定的Cookie響應頭。

COOKIE SENT(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個規則，适用于小型網站或部落格。參照下方的圖檔，看看哪一種規則，在這個規則集。

<a href="http://www.yslow.net/attachments.php?aid=286"></a>

請注意，最後標明的規則內建為預設的規則集。預設規則集可以是一個預定義的三個之一或您自己建立的一個。

要建立您自己的規則集，單擊Rulesets下拉菜單旁邊的 Edit 按鈕。新的規則集螢幕将顯示：

<a href="http://www.yslow.net/attachments.php?aid=287"></a>

    1、點選左側 New Set 按鈕，出現全部22調規則，勾選你所需的

    2、點選 Save ruleset as... 儲存，會彈出個命名視窗，命名就可以了。

    3、你還可以對自定義的規則再次編輯或者删除。

YSlow 工具

YSlow的工具菜單上提供了多種報告工具，您可以使用獲得的資訊，以幫助您的網頁分析。以下是截圖工具菜單：

1、JSLint

JSLint收集所有外部和内部的JavaScript從目前的網頁，送出給JSLint ，一個JavaScript驗證，并打開一個單獨的視窗了一份報告，存在問題，該網頁的JavaScript的。該報告包括大緻位置的源代碼的問題。很多 時候，這些問題是文法錯誤，但JSLint尋找風格公約的問題和結構性問題。

2、All JS

收集所有外部和内部的JavaScript的網頁，并顯示在一個單獨的腳本視窗。您可能想要使用這個工具來檢視某個腳本，以及是否實際使用是正确的。

3、All JS Beautified

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

4、All JS Minified

收集所有外部和内嵌JavaScript，删除評論和白色空間以縮小的腳本。以改善網頁的性能。

5、All SS

收集所有的行内和外部的樣式表在網頁上，并将其顯示在一個單獨的視窗。

6、All Smush.it

如果您按一下所有Smush.it ， Smush.it将運作在網頁上所有的圖檔組成。此工具将告訴你該圖像可被優化，并建立一個壓縮檔案，來優化圖像。當您選擇此工具你會看到輸出如下所示：

以上就是Yslow的使用指南，結束。

本文轉自黃聰部落格園部落格，原文連結：http://www.cnblogs.com/huangcong/archive/2011/03/11/1981107.html，如需轉載請自行聯系原作者