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

梅蘭竹^_^ 2010-07-27

展開全文

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

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

安裝 YSlow

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

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

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

使用Yslow

Yslow是運行在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狀態(tài)欄,，然后選擇或取消自動運行。

Yslow視圖

YSlow顯示測試結(jié)果的分析,分為等級,、組件,、統(tǒng)計信息。你可以瀏覽這些觀點之間選擇標簽以觀的名字在YSlow標簽的Firebug控制臺,。

以下是說明的等級,、組件、統(tǒng)計信息,。

一,、等級視圖

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

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

下面是一個等級的例子：

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

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

二,、組件視圖

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

下面簡要列在組件檢視表：

TYPE：該組件的類型。該網(wǎng)頁是由組成部分的下列類型： 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請求報頭

HEADERS：HTTP信息頭,，點擊放大鏡查看全面信息。

URL：鏈接地址

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

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

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

ACTION：額外的性能分析

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

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

YSlow菜單欄

一,、規(guī)則集

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

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

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

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

2,、點擊 Save ruleset as... 保存,，會彈出個命名窗口，命名就可以了,。

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

YSlow 工具

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

1,、JSLint

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