1. 什么是Yslow：YSlow分析網(wǎng)頁,并提出如何提高其性能的基礎(chǔ)上一套規(guī)則,高性能的網(wǎng)頁。

   成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供微山企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務(wù)。10年已為微山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

       首先安裝 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的一部分被顯示在的瀏覽器窗口。

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

你可以選擇 Autorun YSlow each time a web page is loaded 它將自動對以后打開頁面進(jìn)行分析，您也可以右擊YSlow狀態(tài)欄，然后選擇或取消自動運行。

Yslow視圖,  YSlow顯示測試結(jié)果的分析,分為等級、組件、統(tǒng)計信息。

一、等級視圖

查看一個分析,選擇頁面的性能等級標(biāo)簽或點擊網(wǎng)頁的字母等級在狀態(tài)欄這頁紙的底部。

            視圖顯示了等級為網(wǎng)頁的成績單。整個字母等級為頁面顯示在頂部隨著全面數(shù)值的表現(xiàn)。這個頁面是基于22可分級的高性能網(wǎng)頁的規(guī)則(見性能規(guī)則)。這些規(guī)則是列在按重要性的高到低排序。從 A 到F 級，A 級最高。

下面是一個等級的例子：

 如果頁面與某一個規(guī)則無關(guān)，則顯示 N/A ，表示不適用。

點擊每一規(guī)則，都給出了改進(jìn)建議。要查看更全面的改進(jìn)方法進(jìn)入前端性能優(yōu)化指南

二、 組件視圖

  

分組顯示頁面組件，表格列出組件的信息，點擊 Expand All展開顯示給個分組內(nèi)各的組件信息。

下面簡要列在組件檢視表：

TYPE：該組件的類型。該網(wǎng)頁是由組成部分的下列類型： doc, js, css, flash, cssp_w_picpath, p_w_picpath, redirect, favicon, xhr, and iframe.

SIZE(KB)：該組件的大小以千字節(jié)。

GZIP(KB)：該組件的gzip壓縮的大小以千字節(jié)。

COOKIE RECEIVED(bytes)：字節(jié)數(shù)在HTTP設(shè)置的Cookie響應(yīng)頭。

COOKIE SENT(bytes)：節(jié)數(shù)的Cookie在HTTP請求報頭

HEADERS：HTTP信息頭，點擊放大鏡查看全面信息。

URL：鏈接地址

EXPIRES(Y/M/D)：日期的Expires頭，屬于緩存設(shè)置一種。

RESPONSE TIME (ms)：響應(yīng)時間

ETAG：ETag響應(yīng)頭，也是緩存設(shè)置的一種

ACTION：額外的性能分析

三、統(tǒng)計信息視圖

   

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

     YSlow菜單欄

 一、規(guī)則集

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

2.  精英(V1導(dǎo)聯(lián)) - 這個規(guī)則集包含原始13規(guī)則中使用了YSlow 1.0 。 

3.  小網(wǎng)站/博客 - 這個規(guī)則集包含14個規(guī)則，參照下方的圖片，看看哪一種規(guī)則，在這個規(guī)則集。

請注意，最后選定的規(guī)則集成為默認(rèn)的規(guī)則集。默認(rèn)規(guī)則集可以是一個預(yù)定義的 三個之一或您自己創(chuàng)建的一個。

要創(chuàng)建您自己的規(guī)則集，單擊Rulesets下拉菜單旁邊的 Edit 按鈕。

    1. 點擊左側(cè) New Set 按鈕，出現(xiàn)全部22調(diào)規(guī)則，勾選你所需的

    2. 點擊 Save ruleset as... 保存，會彈出個命名窗口，命名就可以了。

    3. 你還可以對自定義的規(guī)則再次編輯或者刪除。

YSlow 工具,

YSlow的工具菜單上提供了多種報告工具，您可以使用獲得的信息，以幫助您的網(wǎng)頁分析。

1、JSLint

      JSLint收集所有外部和內(nèi)部的JavaScript從目前的網(wǎng)頁，提交給JSLint ，一個JavaScript驗證，并打開一個單獨的窗口，說明存在問題，該網(wǎng)頁的JavaScript的。該報告包括大致位置的源代碼的問題。很多時候，這些問題是語法錯誤，但JSLint尋找風(fēng)格公約的問題和結(jié)構(gòu)性問題。

.......下面就不一 一附圖了，一個個點進(jìn)去分析

2、All JS

     收集所有外部和內(nèi)部的JavaScript的網(wǎng)頁，并顯示在一個單獨的腳本窗口。

     您可能想要使用這個工具來查看某個腳本，以及是否實際使用是正確的。

   

3、All JS Beautified，將js以人們可讀的方式展示。

4、All JS Minified，收集所有外部和內(nèi)嵌JavaScript，刪除評論和白色空間以縮小的腳本。以改善網(wǎng)頁的性能。

5、All CSS，收集所有的行內(nèi)和外部的樣式表在網(wǎng)頁上，并將其顯示在一個單獨的窗口。

6、All Smush.it

      如果您按一下所有Smush.it, Smush.it將運行在網(wǎng)頁上所有的圖片組成。

      此工具將告訴你該圖像可被優(yōu)化，并創(chuàng)建一個壓縮文件，來優(yōu)化圖像。

ps:結(jié)合網(wǎng)站實例分析

 

網(wǎng)站題目：YSlow2.0分析網(wǎng)頁前端性能
文章地址：http://jinyejixie.com/article10/ggipdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、App開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)