天天看點

YSlow2.0 分析網頁前端性能

  1. 什麼是Yslow:YSlow分析網頁,并提出如何提高其性能的基礎上一套規則,高性能的網頁。

       首先安裝 YSlow

先安裝 Firebug(運作在Firebug之下)  https://addons.mozilla.org/en-US/firefox/addon/1843

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

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

使用Yslow,兩種方法啟動Yslow

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

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

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

YSlow2.0 分析網頁前端性能

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

你可以選擇 Autorun YSlow each time a web page is loaded 它将自動對以後打開頁面進行分析,您也可以右擊YSlow狀态欄,然後選擇或取消自動運作。

YSlow2.0 分析網頁前端性能

Yslow視圖,   YSlow顯示測試結果的分析,分為等級、元件、統計資訊。

一、等級視圖

  檢視一個分析,選擇頁面的性能等級标簽或點選網頁的字母等級在狀态欄這頁紙的底部。

            視圖顯示了等級為網頁的成績單。整個字母等級為頁面顯示在頂部随着全面數值的表現。這個頁面是基于22可分級的高性能網頁的規則(見性能規則)。這些規則是列在按重要性的高到低排序。從 A 到F 級,A 級最高。

下面是一個等級的例子:

YSlow2.0 分析網頁前端性能

 如果頁面與某一個規則無關,則顯示 N/A ,表示不适用。

點選每一規則,都給出了改進建議。要檢視更全面的改進方法進入前端性能優化指南

二、 元件視圖

YSlow2.0 分析網頁前端性能

分組顯示頁面元件,表格列出元件的資訊,點選 Expand All展開顯示給個分組内各的元件資訊。

下面簡要列在元件檢視表:

TYPE:該元件的類型。該網頁是由組成部分的下列類型: doc, js, css, flash, cssp_w_picpath, p_w_picpath, 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:額外的性能分析

三、統計資訊視圖

YSlow2.0 分析網頁前端性能

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

      YSlow菜單欄

 一、規則集

1.  YSlow (2版)  - 這一規則集包含了所有22個測試的規則。 

2.  精英(V1導聯) - 這個規則集包含原始13規則中使用了YSlow 1.0 。 

3.  小網站/部落格 - 這個規則集包含14個規則,參照下方的圖檔,看看哪一種規則,在這個規則集。

YSlow2.0 分析網頁前端性能

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

要建立您自己的規則集,單擊Rulesets下拉菜單旁邊的 Edit 按鈕。

YSlow2.0 分析網頁前端性能

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

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

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

YSlow 工具,

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

YSlow2.0 分析網頁前端性能

1、JSLint

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

YSlow2.0 分析網頁前端性能

.......下面就不一 一附圖了,一個個點進去分析

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将運作在網頁上所有的圖檔組成。

      此工具将告訴你該圖像可被優化,并建立一個壓縮檔案,來優化圖像。