評測網頁效率的工具—YSlow

[轉]評測網頁效率的工具—YSlow

本文轉自：http://www.yuloo.com/news/2008-06-04/89192.html

YSlow是由Yahoo開發者團隊發佈的一款基於Firebug的插件。而Firebug 又是一款基於FireFox的插件。因此說YSlow是一款基於FireFox插件的插件。雖然有點繞，可是最終說明的問題是：

　　很遺憾，微軟的IE系列瀏覽器不能使用YSlow。

　　YSlow只能使用在FireFox瀏覽器上。

　　若是要想使用YSlow，那麼你必須先安裝FireFox。

　　若是要想使用YSlow，那麼你就要安裝FireFox上的Firebug插件。

　　這看上去好像有點使人沮喪，可是事實上它並不像想象中的那麼麻煩，只要按照下面的步驟你將能很快的使用YSlow：

　　到http://www.mozilla.net.cn/firefox/ 下載最新版的FireFox，並安裝它。固然若是你已經安裝了FireFox能夠跳過此步。

　　到https://addons.mozilla.org/en-US/firefox/addon/1843/ 下載最新版的Firebug，並安裝它。固然若是你已經安裝了Firebug能夠跳過此步。

　　到https://addons.mozilla.org/en-US/firefox/addon/5369/ 下載最新版的YSlow，並安裝它。固然若是你已經安裝了YSlow能夠跳過此步。

　　圖1：在菜單中先打開Firebug插件這時候打開FireFox，你將在【工具】菜單中看到【firebug】(如圖1)。打開firebug，而後在firebug中點擊YSlow菜單，便看進入YSlow的主界面(如圖2)。

　　圖2：在菜單中先打開Firebug插件(點擊小圖查看完整大圖)

　　點擊【Performace】菜單

　　YSlow便開始分析此頁的效率，並從13個最影響網頁效率的方面給出評估(如圖4)。

　　圖3：YSlow給出的本頁面效率評估

　　能夠看出來，YSlow評估的依據就是咱們在《如何提升網頁的效率(上篇)——提升網頁效率的14條準則》中提到的前面13條。前面藍色的字母表示這一條準備的得分。A最高。點擊右面的三角形能夠獲得更多的信息和建議，有些信息裏面還有「放大鏡」 圖標，點擊也將展現更爲詳細的信息和建議。(如圖4所示)

　　圖4：YSlow能夠給出每條準則的詳細評估信息和建議

　　點擊【Stats】菜單

　　這個視圖會告訴你頁面的整體統計信息。包括頁面大小、css樣式表大小、腳本文件大小、整體圖片大小、flash文件大小和css中用到的圖片文件大小。還會告訴你，哪些東西被緩存了，緩存了多少等等。

　　圖5：【Stats】視圖信息

　　點擊【Components】菜單

　　這個視圖是一個頁面全部部件的信息列表。從中咱們能夠得知每一個部件的各類詳細信息。如：類型、URL、Expires數據、狀態、大小、讀取時間、ETag信息等等。經過對這個列表的分析，咱們就能夠知道究竟是什麼東西最耗費咱們的資源，從而有針對性的進行優化。

　　圖6：【Components】視圖信息，點擊「放大鏡」圖標咱們能夠知道更詳細的信息(點擊小圖查看完整大圖)

　　點擊【Tools】菜單

　　【Tools】菜單包含4個子菜單，就是4個實用工具。【JSLine】工具會生成JSLine報表，報表是對本網頁中JS腳本的分析報告，包含錯誤和建議。【ALL JS】工具，將生成本頁面全部腳本代碼便於閱讀和打印的報表頁面。【ALL CSS】工具，將生成本頁面 全部CSS樣式表代碼便於閱讀和打印的報表頁面。【Printable View】將【Performance】和【Stats】視圖中的信息生成一份更適合閱讀和打印的報表頁面。

　　圖7：【Tools】菜單，包含了4個子菜單

　　點擊【Help】菜單

　　【Help】主要是些經常使用的幫助途徑的入口。從這裏你能夠很方面的訪問YSlow的官方網絡和博客。若是你還對YSlow的使用有什麼疑惑的話，那麼在這裏你將得到滿意的解答。

　　圖8：【Help】菜單是些經常使用的幫助入口