網頁性能優化

　這篇文章主要說的是網頁性能優化方面的知識，在其中穿插了一些網絡請求與相應的基礎知識。

1、chrome瀏覽器調試工具介紹

　　　　　　　　　　

　　chrome瀏覽器調試面板上包含了Console面板、Elements面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板等這些功能面板。

這些按鈕的功能點以下：

• Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面獲得反饋。
• Console:記錄開發者開發過程當中的日誌信息，且能夠做爲與JS進行交互的命令行Shell。
• Sources:斷點調試JS。
• Network:從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），能夠根據這個進行網絡性能優化。
• Timeline:記錄並分析在網站的生命週期內所發生的各種事件，以此能夠提升網頁的運行時間的性能。（參考文章：http://www.cnblogs.com/cherryblossom/p/5502591.html）
• Profiles:若是你須要Timeline所能提供的更多信息時，能夠嘗試一下Profiles,好比記錄JS CPU執行時間細節、顯示JS對象和相關的DOM節點的內存消耗、記錄內存的分配細節。
• Application:記錄網站加載的全部資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等。
• Security:判斷當前網頁是否安全。
• Audits:對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議。好比列出全部沒有用到的CSS文件等。

1.一、network面板（能夠參考文章：http://www.cnblogs.com/ys-ys/p/5625409.html）

　　Network面板能夠記錄頁面上的網絡請求的詳情信息，從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間、Request和Response等），能夠根據這個進行網絡性能優化。

　　　　　

右鍵能夠選擇展現的屬性。各類屬性介紹：

　　Name：請求文件名稱
　　Method：方法（常見的是get post）
　　Status：請求完成的狀態
　　Type：請求的類型
　　Domain:訪問的域名或者ip地址
　　remote Address:遠程ip:端口
　　Initiator：請求源也就是說該連接經過什麼發送（常見的是Parser、Script）
　　Size：下載文件或者請求佔的資源大小
　　Time：請求或下載的時間
　　Waterfall：該連接在發送過程當中的時間狀態軸（咱們能夠把鼠標移動到這些紅紅綠綠的時間軸上，對應的會有它的詳細信息：開始下載時間，等待加載時間，自身下載耗時）

　經過點擊某個資源的Name能夠查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太同樣，可能包括以下Tab信息：

• Headers 該資源的HTTP頭信息。
• Preview 根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
• Response 顯示HTTP的Response信息。
• Cookies 顯示資源HTTP的Request和Response過程當中的Cookies信息。
• Timing 顯示資源在整個請求生命週期過程當中各部分花費的時間。

針對上面4個Tab進行詳細講解一下各個功能：

① 查看資源HTTP頭信息

在Headers標籤裏面能夠看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

　　　　　　　　　　　　

② 查看資源預覽信息

在Preview標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息。下圖顯示的是當選擇的資源是JSON格式時的預覽信息。

　　　　　　　　

③ 查看資源HTTP的Response信息

在Response標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內容。下圖顯示的是當選擇的資源是CSS格式時的響應內容。

　　　　　　　　

④ 查看資源Cookies信息

若是選擇的資源在Request和Response過程當中存在Cookies信息，則Cookies標籤會自動顯示出來，在裏面能夠查看全部的Cookies信息。

　　　　　　　　

⑤ 分析資源在請求的生命週期內各部分時間花費信息

在Timing標籤中能夠顯示資源在整個請求生命週期過程當中各部分時間花費信息，可能會涉及到以下過程的時間花費狀況：

• Queuing 排隊的時間花費。可能因爲該請求被渲染引擎認爲是優先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的併發請求的最大鏈接數（Chrome的最大併發鏈接數爲6）.
• Stalled 從HTTP鏈接創建到請求可以被髮出送出去(真正傳輸數據)之間的時間花費。包含用於處理代理的時間，若是有已經創建好的鏈接，這個時間還包括等待已創建鏈接被複用的時間。
• Proxy Negotiation 與代理服務器鏈接的時間花費。
• DNS Lookup 執行DNS查詢的時間。網頁上每個新的域名都要通過一個DNS查詢。第二次訪問瀏覽器有緩存的話，則這個時間爲0。
• Initial Connection / Connecting 創建鏈接的時間花費，包含了TCP握手及重試時間。
• SSL 完成SSL握手的時間花費。
• Request sent 發起請求的時間。
• Waiting (Time to first byte (TTFB)) 是最初的網絡請求被髮起到從服務器接收到第一個字節這段時間，它包含了TCP鏈接時間，發送HTTP請求時間和得到響應消息第一個字節的時間。
• Content Download 獲取Response響應數據的時間花費。

　　TTFB這個部分的時間花費若是超過200ms，則應該考慮對網絡進行性能優化了。

2、網頁性能優化簡介

　　對於普通的網頁訪問，80%的響應時間消耗在前端（Yahoo），動態請求時間佔比較少，優化難度大；靜態請求時間佔比大，優化難度低、效果顯著，且有成熟的優化手段和工具。

　　　　　　　　　　　　　　　　

 　　

3、網頁優化規則

參考文檔：https://developer.yahoo.com/performance/rules.html

3.一、使用更少的http請求

　　頁面加載過程發起一個HTTP頁面請求，發起多個請求獲取頁面資源（css、js、圖片、ajax等）

　　　　　　　　　　

 

減小http請求有這樣幾個優勢:

(1) 減小DNS請求所耗費的時間。

(2) 減小服務器壓力。

(3) 減小http請求頭。

優化手段
一、合併文件
方法：合併css、js文件
要點：文件的合併要在項目前期開展，性能優化階段合併容易致使Bug產生

二、合併圖片
方法：將多個圖片合併在一個文件中，採用css技術切分圖片
（切割圖片這裏不是真正的切割，只是用CSS取圖片中的一部分，這樣作的好處就是減小了打開網頁時請求圖片的次數）

 3.二、添加Expires頭

　　<meta http-equiv="expires" content="Sunday 26 October 2010 01:00 GMT" />

　　添加Expires頭能有效的利用瀏覽器的緩存能力來改善頁面的性能，能在後續的頁面中有效避免不少沒必要要的Http請求，WEB服務器使用Expires頭來告訴Web客戶端它可使用一個組件的當前副本，直到指定的時間爲止。expires用於設定網頁的過時時間,一旦過時就必須從服務器上從新加載.時間必須使用GMT格式。

瀏覽器初次訪問服務器---------------服務器返回200狀態

　　　　　　　　

瀏覽器再次請求服務器時，瀏覽器會先判斷max-age，若是到期則直接請求服務器，不然直接從緩存中取，服務器收到請求後，判斷文件是否被修改過，如果則直接返回200，不然返回304，瀏覽器將從緩存中獲取文件

　　　　　　

 3.三、使用gzip壓縮

gzip壓縮能夠犧牲較小的CPU資源，對css、js等進行壓縮，節約帶寬資源（對圖片、pdf等已壓縮格式gzip沒法節約帶寬）

Tomcat配置
<Connector port="81" proxyPort="80" protocol="HTTP/1.1「 compression="on"
compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,application/javascript" />

Nginx配置
gzip on;
gzip_min_length 1024;
gzip_types text/plain text/css application/x-javascript application/javascript;

　　　　

3.四、最小化CSS、JavaScript、圖片

一、CSS、Java Script文件壓縮
手段：刪除空格、換行、註釋
工具：JSMin、YUI CSS Compressor

使用壓縮工具能夠減小Javascript和CSS盡一半的文件大小，推薦使用yui壓縮，參考文檔：https://blog.csdn.net/baidu_25343343/article/details/53396756

在線yui壓縮js/css地址：http://ganquan.info/yui/?hl=zh-CN

二、圖片壓縮
手段：在不改變視覺效果下壓縮圖片大小
工具：https://tinypng.com/（單張照片最大支持5M）

 

 

 圖片壓縮緣由，參考文章：https://blog.csdn.net/newchenxf/article/details/51693753

其餘優化手段：

將CSS和JavaScript獨立成外部文件：
　　將可複用的css、js獨立成外部文件，在各個頁面共享。減小頁面大小，並利用瀏覽器緩存節約下載帶寬

移除重複的CSS和JavaScript：
　　浪費下載資源（IE）和CPU時間（IE、FireFox）注：除此以外，還要避免引用不一樣js庫的不一樣版本和含有大量重複內容的css

將CSS放在頂部：
　　用戶沒必要等待網頁所有下載完，就能夠逐步看到網頁的呈現，增強用戶體驗

將JavaScript放在底部：
　　腳本下載將會阻塞其餘內容下載

避免CSS Expression：
　　CSS表達式會消耗CPU資源（網頁滾動、鼠標移動等將觸發屢次計算）、體驗不一致（僅IE5-7支持）

4、網頁優化工具--YSlow

 　　Yslow（讀作Why Slow）是Yahoo發佈的一款插件。能對網站頁面進行分析，並告知如何進行優化。

　　下載地址：http://yslow.org/

　　　　　　　　　　　　　　

chrome瀏覽器當中添加的拓展程序會默認展現在左上角，點擊YSlow圖標可打開YSlow

　　　　　　　　　　　　　　

　　　　　　　　　　　　　　

點擊Run Test會對當前打開的網頁進行數據分析。

 

YSlow顯示測試結果的分析,分爲等級、組件、統計信息。你能夠瀏覽這些觀點之間選擇標籤以觀的名字在YSlow標籤的Firebug控制檯。

如下是說明的等級、組件、統計信息。

4.一、等級視圖

   查看一個分析,選擇頁面的性能等級標籤或點擊網頁的字母等級在狀態欄這頁紙的底部。
視圖顯示了等級爲網頁的成績單。整個字母等級爲頁面顯示在頂部隨着全面數值的表現。這個頁面是基於22可分級的高性能網頁的規則。這些規則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級，A 級爲最高。
下面是一個等級的例子：

 　　　　　　　　　　　　　　

若是頁面與某一個規則無關，則顯示 N/A ，表示不適用。

點擊每一規則，都給出了改進建議。

4.二、組件視圖

 　　　　　　　　　　　

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

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

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

4.三、統計信息視圖

 　　　　　　　　　　　　　　　　 

       左側圖表顯示是頁面元素在空緩存的加載狀況，右側爲頁面元素使用緩存後的頁面加載狀況。咱們能夠看到，頁面元素緩存後的使頁面的http請求和頁面總大小都減小，從而加快了頁面打開時間。