|
YSlow是由Yahoo開發(fā)者團隊發(fā)布的一款基于Firebug的插件,。而Firebug 又是一款基于FireFox的插件。所以說YSlow是一款基于FireFox插件的插件,。雖然有點繞,，但是最終說明的問題是：
這看上去好像有點令人沮喪,，但是事實上它并不像想象中的那么麻煩,，只要按照下面的步驟你將能很快的使用YSlow：
圖2：在菜單中先打開Firebug插件 這時候打開FireFox,，你將在【工具】菜單中看到【firebug】（如圖2）,。打開firebug，然后在firebug中點擊YSlow菜單,，便看進入YSlow的主界面（如圖3）,。 圖3：在菜單中先打開Firebug插件(點擊小圖查看完整大圖) 點擊【Performace】菜單YSlow便開始分析此頁的效率，并從13個最影響網(wǎng)頁效率的方面給出評估（如圖4）,。 圖4：YSlow給出的本頁面效率評估 可以看出來,，YSlow評估的依據(jù)就是我們在《提高網(wǎng)頁效率的14條準(zhǔn)則》中提到的前面13條。前面藍(lán)色的字母表示這一條準(zhǔn)則的得分,。A最高,。點擊右面的三角形可以得到更多的信息和建議，有些信息里面還有“放大鏡” 圖標(biāo),，點擊也將展示更為詳細(xì)的信息和建議,。（如圖5所示） 圖5：YSlow可以給出每條準(zhǔn)則的詳細(xì)評估信息和建議 點擊【Stats】菜單這個視圖會告訴你頁面的總體統(tǒng)計信息。包括頁面大小,、css樣式表大小,、腳本文件大小、總體圖片大小,、flash文件大小和css中用到的圖片文件大小,。還會告訴你，哪些東西被緩存了,，緩存了多少等等。 圖6：【Stats】視圖信息 點擊【Components】菜單這個視圖是一個頁面所有部件的信息列表,。從中我們可以得知每個部件的各種詳細(xì)信息,。如：類型、URL,、Expires數(shù)據(jù),、狀態(tài)、大小,、讀取時間,、ETag信息等等。通過對這個列表的分析,，我們就可以知道到底是什么東西最耗費我們的資源,，從而有針對性的進行優(yōu)化,。 圖7：【Components】視圖信息，點擊“放大鏡”圖標(biāo)我們可以知道更詳細(xì)的信息（點擊小圖查看完整大圖） 點擊【Tools】菜單【Tools】菜單包含4個子菜單,，就是4個實用工具,。【JSLine】工具會生成JSLine報表,，報表是對本網(wǎng)頁中JS腳本的分析報告,，包含錯誤和建議?！続LL JS】工具,，將生成本頁面所有腳本代碼便于閱讀和打印的報表頁面?！続LL CSS】工具,，將生成本頁面 所有CSS樣式表代碼便于閱讀和打印的報表頁面?！綪rintable View】將【Performance】和【Stats】視圖中的信息生成一份更適合閱讀和打印的報表頁面,。 圖8：【Tools】菜單，包含了4個子菜單 點擊【Help】菜單【Help】主要是些常用的幫助途徑的入口,。從這里你可以很方面的訪問YSlow的官方網(wǎng)絡(luò)和博客,。如果你還對YSlow的使用有什么疑惑的話，那么在這里你將獲得滿意的解答,。 圖8：【Help】菜單是些常用的幫助入口 后記“工欲善其事,，必先厲其器！”好的工具的確能很大的提高我們的工作效率,。但是“阿斗”就算手里拿著“方天畫戟”,，估計也沒有幾個人怕他。好的工具是一方面,，但是更重要的還是提高我們自身的知識水平,。就如同這款YSlow，如果沒有 《提高網(wǎng)頁效率的14條準(zhǔn)則》中的理論知識,，工具提供的信息我們看到的可能只是表面,，就算看懂了數(shù)據(jù)，我們也很難知道對應(yīng)的手段和措施,。壯漢拿厲斧,，這樣伐木才能又快又輕松。 |
|
|
