Yslow web前端性能分析工具
YSlow分析網頁,并提出如何提高其性能的基礎上一套規(guī)則,高性能的網頁。我搜索一下”Yslow使用說明“,發(fā)現(xiàn)都是舊版本Yslow的使用介紹。于是翻譯了一下yahoo官方關于新版Yslow的的使用幫助,希望給初次使用Yslow的朋友一些幫助。
注:英文不是很好,對著翻譯軟件翻譯的,有不對的地方,大家指正。
安裝 YSlow
先安裝 Firebug https://addons.mozilla.org/en-US/firefox/addon/1843
Firebug 幫助文檔 http://www.getfirebug.com/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顯示測試結果的分析,分為等級、組件、統(tǒng)計信息。你可以瀏覽這些觀點之間選擇標簽以觀的名字在YSlow標簽的Firebug控制臺。
以下是說明的等級、組件、統(tǒng)計信息。
一、等級視圖
查看一個分析,選擇頁面的性能等級標簽或點擊網頁的字母等級在狀態(tài)欄這頁紙的底部。
視圖顯示了等級為網頁的成績單。整個字母等級為頁面顯示在頂部隨著全面數值的表現(xiàn)。這個頁面是基于22可分級的高性能網頁的規(guī)則(見性能規(guī)則)。這些規(guī)則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級,A 級為最高。
下面是一個等級的例子:
如果頁面與某一個規(guī)則無關,則顯示 N/A ,表示不適用。
點擊每一規(guī)則,都給出了改進建議。要查看更全面的改進方法進入前端性能優(yōu)化指南
二、組件視圖
分組顯示頁面組件,表格列出組件的信息,點擊 Expand All展開顯示給個分組內各的組件信息。
下面簡要列在組件檢視表:
TYPE:該組件的類型。該網頁是由組成部分的下列類型: doc, js, css, flash, cssimage, image, redirect, favicon, xhr, and iframe.
SIZE(KB):該組件的大小以千字節(jié)。
GZIP(KB):該組件的gzip壓縮的大小以千字節(jié)。
COOKIE RECEIVED(bytes):字節(jié)數在HTTP設置的Cookie響應頭。
COOKIE SENT(bytes):節(jié)數的Cookie在HTTP請求報頭
HEADERS:HTTP信息頭,點擊放大鏡查看全面信息。
URL:鏈接地址
EXPIRES(Y/M/D):日期的Expires頭,屬于緩存設置一種。
RESPONSE TIME (ms):響應時間
ETAG:ETag響應頭,也是緩存設置的一種
ACTION:額外的性能分析
三、統(tǒng)計信息視圖
左側圖表顯示是頁面元素在空緩存的加載情況,右側為頁面元素使用緩存后的頁面加載情況。我們可以看到,頁面元素緩存后的使頁面的http請求和頁面總大小都減少,從而加快了頁面打開時間。參看(頁面的緩存設置)
一、規(guī)則集
1 、YSlow ( 2版) -這一規(guī)則集包含了所有22個測試的規(guī)則。
2 、精英( V1導聯(lián)) -這個規(guī)則集包含原始13規(guī)則中使用了YSlow 1.0 。
3、小網站或博客-這個規(guī)則集包含14個規(guī)則,適用于小型網站或博客。參照下方的圖片,看看哪一種規(guī)則,在這個規(guī)則集。
請注意,最后選定的規(guī)則集成為默認的規(guī)則集。默認規(guī)則集可以是一個預定義的三個之一或您自己創(chuàng)建的一個。
要創(chuàng)建您自己的規(guī)則集,單擊Rulesets下拉菜單旁邊的 Edit 按鈕。新的規(guī)則集屏幕將顯示:
1、點擊左側 New Set 按鈕,出現(xiàn)全部22調規(guī)則,勾選你所需的
2、點擊 Save ruleset as... 保存,會彈出個命名窗口,命名就可以了。
3、你還可以對自定義的規(guī)則再次編輯或者刪除。
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 CSS
收集所有的行內和外部的樣式表在網頁上,并將其顯示在一個單獨的窗口。
6、All Smush.it
如果您按一下所有Smush.it , Smush.it將運行在網頁上所有的圖片組成。此工具將告訴你該圖像可被優(yōu)化,并創(chuàng)建一個壓縮文件,來優(yōu)化圖像。當您選擇此工具你會看到輸出如下所示:
以上就是Yslow的使用指南,結束。
posted on 2012-04-13 13:53 順其自然EVO 閱讀(546) 評論(0) 編輯 收藏 所屬分類: loadrunner 、性能測試