提高網站性能的方法

  前言

  ​<code>​性能黃金法則​</code>​（Performance Golden Rule)解釋了隻有10%~20%的最終使用者響應時間花在接收所請求的使用者HTML文檔上，剩餘80%~90%時間花在為HTML文檔所引用的所有元件（圖檔、腳本、樣式表等）進行的HTTP請求上，最終使用者響應時間花費在頁面元件上

  ——Steve Sounders

1、減少HTTP請求

　HTTP協定是無狀态的應用層協定，意味着每次HTTP請求都需要經曆網絡層、傳輸層、鍊路層進而進行資料傳輸，而在伺服器端，每個HTTP都需要啟動獨立的線程去處理，這些通信和服務的開銷都很昂貴，減少HTTP請求的數目可有效提高通路性能。

　減少HTTP請求的主要手段是：合并CSS，合并JavaScript，合并圖檔。将浏覽器一次通路需要的JavaScript,CSS合并成一個檔案，這樣浏覽器就隻需要一次請求。多張圖檔合并成一張，如精靈圖。如果每張圖檔都有不同的超連結，可通過CSS偏移響應滑鼠點選操作，構造不同的URL。

2、使用浏覽器緩存（避免重複的HTTP請求）

　對那些經常使用的資料和需要大量的時間來建立的資料可以存儲在記憶體中，後來的請求直接使用，不需要再去重新生成。

　對一個網站而言，像CSS,JavaScript,Logo,圖示等這些靜态資源檔案更新的頻率都比較低，而這些檔案又幾乎是每次HTTP請求都需要的，如果将這些檔案緩存在浏覽器中，可以極好地改善性能。通過設定HTTP頭中Cache-Control和Expires屬性，可設定浏覽器緩存，緩存時間可以是數天甚至是幾個月。有時候，靜态資源檔案變化需要及時應用到用戶端浏覽器，這種情況可以通過改變檔案名實作，比如一般會在JavaScript後面加上一個版本号，使浏覽器重新整理修改的檔案。

Expires使用：Web伺服器通過expires告訴用戶端在指定的時間内，都使用該檔案的緩存副本，不再向服務端重複送出請求

　　這個設定意味着截止到2016年12月1日，都可以使用該緩存副本，無需再送出請求。

  Expires這種通過截止日期的方式，存在一個限制：要求用戶端和服務端時鐘嚴格同步，而HTTP 1.1引入的Cache-Control通過指定一個以秒為機關的時間指定緩存日期，則不存該限制，

Cache-Control使用：

　　這個設定意味緩存時間為一年，推薦使用Cache-Control，但是在支援HTTP 1.1的情況下，另外要注意的一點：Cache-Control和Expire同時存在時，Cache-Control具有更高的優先級。

 3、壓縮元件（減小HTTP請求大小）

　在伺服器端對檔案進行壓縮，在浏覽器端對檔案解壓縮，可有效較少通信傳輸的資料量。文本檔案的壓縮效率科大80%以上 ，GZIP是目前最常用也是最有效的壓縮方式。

 然而，并非所有的資源檔案都需要壓縮，壓縮的成本包括服務端需要花費CPU周期進行壓縮，而用戶端也需要對壓縮檔案進行解壓縮，必須結合自己網站進行權衡。現在絕大多數網站都對其HTML文檔進行壓縮，部分網站選擇對js、css進行壓縮，幾乎沒有網站對圖檔、PDF等檔案進行GZIP壓縮，原因在于這些檔案是已經被壓縮過的，采用HTTP壓縮已經被過壓縮的東西并不能使它更小。事實上，添加标頭，壓縮字典，并校驗響應體實際上使它變得更大，而且還浪費了CPU。

 如何對網站開啟GZIP，需要在所使用的web伺服器（IIS、Nginx、Apache等）中進行設定。

4、css檔案放在首部

　将CSS檔案放在首部和放在尾部，并不影響HTTP請求，是以從請求時間上來講是一緻的，然而從使用者體驗的角度，将CSS檔案放在首部，會獲得更好的使用者體驗。

 原因在于浏覽器是從上到下依次解析html文檔，将CSS檔案置于頭部，頁面會首先對CSS檔案送出請求，随後加載DOM樹并對其進行渲染，頁面會逐漸呈現在使用者面前。

 而與之相反，如果将CSS檔案放置在尾部，頁面加載完整DOM之後請求CSS檔案，然後對整個DOM樹渲染并呈現給使用者，從使用者的角度，在css檔案沒有請求完成之前，整個頁面是出于​<code>​白屏​</code>​狀态的，​<code>​白屏​</code>​是浏覽器的一種行為，​<code>​David Hyatt​</code>​對其的解釋是這樣的

在樣式樹沒有完全加載之前，渲染dom樹就是一種浪費，因為在樣式樹加載完成之後會再次渲染，出現FOUC(無樣式内容閃爍)問題。

 另外要注意的一點，使用​<code>​link​</code>​而不是​<code>​@import​</code>​引入css樣式表，使用​<code>​@import​</code>​引入的樣式即使寫在首部，也會在文檔最後加載。

5、js檔案放在尾部

　HTTP請求是并行的，不同浏覽器并行下載下傳的數目也不一樣（2、4、或者8個），并行下載下傳提高了HTTP請求的速度。而将JS檔案放在首部，不僅會阻塞後面檔案的下載下傳而且會阻塞頁面的渲染。

 為什麼會這樣呢？原因有兩個：

JS檔案中可能存在document.write修改頁面的内容，是以頁面會在腳本執行完成之後才可使渲染。

不同JS檔案不管大小如何，可能存在依賴關系，是以必須按照順序進行執行，是以在加載腳本的時候并行下載下傳是禁止的。

 是以，最好的方式是講js檔案放置在尾部，等頁面所有可視化元件加載完成之後再進行請求，提高使用者體驗。

 6、CDN加速

 　CDN(Content Distribute Network,記憶體分發網絡)的本質上仍然是一個緩存，而且将資料緩存在離使用者最近的地方，是使用者以最快速度擷取資料，即所謂網絡通路第一跳。CDN一般緩存的是靜态資源，如圖檔，檔案，CSS，Script腳本，靜态網頁等，但是這些檔案通路頻率很高，将其緩存在CDN可極大改善網頁的打開速度。