免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
網(wǎng)站性能工具Yslow的使用方法

    Yslow是雅虎開發(fā)的基于網(wǎng)頁性能分析瀏覽器插件,從年初我使用了YSlow后,改變了博客模板大量冗余代碼,不僅提升了網(wǎng)頁的打開速度,這款插件還幫助我分析了不少其他網(wǎng)站的代碼,之前我還特意寫了提高網(wǎng)站速度的秘籍,就是通過這款插件分析得出的。網(wǎng)絡(luò)上已經(jīng)有不少Yslow使用說明了,本文我想介紹下我使用Yslow的方法和一些別人沒提到的小技巧。

  • Yslow的安裝方法

    現(xiàn)在Yslow已經(jīng)有很多版本了,本文介紹的是3.0.4最新版,打開Yslow官網(wǎng)就能看到有四個(gè)版本可供選擇:火狐(firefox)瀏覽器、谷歌(chrome)瀏覽器、歐朋(opera)瀏覽器和移動(dòng)版。

    安裝Yslow要先安裝 Firebug(本地址以火狐為例),兩種方法啟動(dòng)Yslow:1、打開Firebug窗口,選擇Yslow選項(xiàng)。2、直接點(diǎn)擊火狐右下角的Yslow啟動(dòng)按鈕。

    (圖1:Yslow的啟動(dòng)界面)

    點(diǎn)擊 Run Test 運(yùn)行Yslow,也可以點(diǎn)擊 Grade, Components, 或Statistics選項(xiàng)開始對頁面的分析,如果在 Autorun YSlow each time a web page is loaded 上打上對勾,它將自動(dòng)對以后打開頁面進(jìn)行分。

    注意圖中的紅框,這里是規(guī)則集,YSlow (V2)包含了所有22個(gè)測試的規(guī)則,YSlow (V1)包含原始13規(guī)則,小網(wǎng)站或博客-這個(gè)規(guī)則集包含14個(gè)規(guī)則,適用于小型網(wǎng)站或博客,建議對號入座。

    雅虎評估網(wǎng)站性能的23條軍規(guī)

    雅虎曾經(jīng)針對網(wǎng)站速度提出了非常著名34條準(zhǔn)則:《Best Practices for Speeding Up Your Web Site》。而現(xiàn)在將34條精簡為更加直觀的23條,并針對每一條給出從F~A的評分以及最終的總分。

    而現(xiàn)在23條網(wǎng)站性能優(yōu)化建議在YSlow的官網(wǎng)首頁就能看到,當(dāng)然也可以不看,在使用Yslow后,在控制面板里就會(huì)給你評分提示,和改進(jìn)建議。

    Grade(等級視圖)—Yslow的第二個(gè)選項(xiàng)卡

    (圖2:Yslow給出的網(wǎng)站性能評分)

    Yslow給出的網(wǎng)站性能評分,從F~A,A是最好的,通過測試盧松松博客來看,網(wǎng)站有4處得分最低,例如圖2中的最低分提示:我博客的HTTP請求太多。其中應(yīng)用了14個(gè)外部JS、3個(gè)CSS文件(之前我已從6個(gè)合并為3個(gè))、14個(gè)CSS背景圖片。

    Yslow的建議是讓我合并這些,至于合并CSS引用圖片我在“提高網(wǎng)站打開速度的7大秘籍”中介紹過。

    Components(組件視圖)—Yslow的第三個(gè)選項(xiàng)卡

    (圖3:通過Components考驗(yàn)查看網(wǎng)頁各個(gè)元素占用的空間大?。?/p>

    通過Components考驗(yàn)查看網(wǎng)頁各個(gè)元素占用的空間大小,例如我博客某個(gè)頁面,有236個(gè)images(圖片),占用了489.2K,通過詳細(xì)查看,發(fā)現(xiàn)來自gravatar(評論頭像)的引用圖片非常大,在加上我博客本省評論量就打,每個(gè)頭像就占用幾K,幾百個(gè)就占用了整個(gè)網(wǎng)頁50%的大小,而且圖片還是引用的,加載就更慢。

    所以,我得出的結(jié)論是:gravatar雖然增強(qiáng)了互動(dòng)性和個(gè)性,但也結(jié)結(jié)實(shí)實(shí)影響了網(wǎng)站速度。

    Statistics(統(tǒng)計(jì)信息視圖)—Yslow的第四個(gè)選項(xiàng)卡

    (圖4:Yslow的統(tǒng)計(jì)信息視圖)

    左側(cè)圖表顯示是頁面元素在空緩存的加載情況,右側(cè)為頁面元素使用緩存后的頁面加載情況。從圖中可以直觀的看出(尤其是我標(biāo)的紅框),這個(gè)網(wǎng)頁263個(gè)HTTP請求,網(wǎng)頁的大小達(dá)到773.9K,意味著打開沒打開一個(gè)頁面幾乎需要下載1M的東西,而通過使用緩存后我們可以看到效果圖片基本靠緩存,而網(wǎng)頁的總大小壓縮到43.2K。

    Statistics這個(gè)統(tǒng)計(jì)信息視圖工具和Components(第三選項(xiàng)卡)一樣,只是效果更直觀,如果要獲得性能優(yōu)化建議還是要看Grade(第二選項(xiàng)卡)的詳細(xì)建議。

    Tools(輔助工具)—Yslow的第五個(gè)選項(xiàng)卡

    (圖5:Yslow提供的小工具)

    JSLint是一個(gè)強(qiáng)大的工具,它可以檢驗(yàn)HTML代碼以及內(nèi)聯(lián)的Javascript代碼,通過JSLint發(fā)現(xiàn)了google analytics上的一個(gè)js錯(cuò)誤。

    ALL JS:查看你這個(gè)網(wǎng)頁上一共引用了多少JS。

    All JS Beautified:把所有JS放在打開的頁面中,利用站長統(tǒng)一檢查(我感覺作用不大)。

    All JS Minified:同上,但它顯示的是壓縮過的js代碼,如果你要JS優(yōu)化,它已經(jīng)給你優(yōu)化好了,來過來直接用。

    All CSS:顯示你網(wǎng)頁所有CSS文件。

    YUI CSS Compressor:顯示網(wǎng)頁壓縮后的CSS文件,也是拿過來可以直接用的。

    All Smush.it?:圖片在線優(yōu)化網(wǎng)站,點(diǎn)擊它后會(huì)自動(dòng)跳到smushit網(wǎng)站上給你自動(dòng)優(yōu)化CSS圖片,該網(wǎng)站提供了優(yōu)化前與優(yōu)化后的對比,點(diǎn)擊直接下載優(yōu)化后的圖片,在覆蓋到自己網(wǎng)站上就可以了,強(qiáng)烈推薦。

    Printable View:這個(gè)是打印用的,部門開會(huì)、前端設(shè)計(jì)師討論、向老板匯報(bào)時(shí)估計(jì)用的上。

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
五招加速網(wǎng)頁響應(yīng)時(shí)間-制作技巧-網(wǎng)頁制作大寶庫
從微博的改版談網(wǎng)頁重構(gòu)
使用YSlow了解你的網(wǎng)頁為什么這么慢【面試+工作】
YSlow使用指南_最新2.0使用指南中文版
網(wǎng)站性能工具Yslow的使用方法 | 我的互聯(lián)網(wǎng)加
Web頁面性能分析工具YSlow開源
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服