提高網站效能的常用措施

網站的效能會受到各種各樣因素的影響，下面就介紹一下常見的提高網站效能的措施。

一.減少HTTP請求數量:

（1）.CSS Sprites:

將網站所有的背景圖片合成到一張圖片，然後利用background-position定位的方式來使用圖片的某一部分。

此種方式可以將多次背景圖片請求縮減為一次，grunt和gulp中都有相關的生成外掛。

關於background-position可以參閱CSS background-position定位詳解一章節。

（2）.合併js和css:

目的也是為了減少HTTP請求數目。

對css檔案的合併目前來說沒有什麼爭議，但是對於當前js模組化盛行，將所有js檔案合併成一個檔案，彷彿是一種倒退。正確的方式是遵守編譯型語言的模式，保持js的模組化，在生成過程中只對初始請求用到的js檔案生成目標檔案。

二.使用內容釋出網路（減少HTTP請求時間）:

HTTP請求時間另一個影響因素是你與網站web伺服器所處的距離，顯然距離越遠，請求所需的時間也越久，通過CDN可以大大改善這一點。CDN是分佈在多個不同地理位置的web伺服器，用於更加有效的向使用者釋出內容。CDN最主要的功能是給終端使用者存放靜態檔案，另外也提供下載、安全服務等功能。

三.設定瀏覽器快取（避免重複HTTP請求）:

（1）.使用Expire/Cache-control:

瀏覽器通過使用快取可以避免每次都進行重複的請求，HTTP 1.0和HTTP1.1分別有不同的快取實現方式，Expires(1.0)和Cache-control(1.1)。Web伺服器通過expires告訴客戶端在指定的時間內，都使用該檔案的快取副本，不再向服務端重複發出請求，例如：

[HTML] 純文字檢視 複製程式碼
Expires: Thu, 01 Dec 2016 16:00:00 GMT （GMT格式）

這個設定意味著截止到2016年12月1日，都可以使用該快取副本，無需再發出請求。

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

[HTML] 純文字檢視 複製程式碼
Cache-Control: max-age=31536000

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

（2）.配置或移除ETag:

使用Expire/Cache-Control可以避免第二次訪問時，使用本地快取避免重複HTTP請求，提高網站速度。然而，在使用者點選了瀏覽器重新整理或者在expire已過期的情況下，仍然會向服務端發出HTTP GET請求，而此時如果該檔案並沒有發生變化，服務端不會返回整個檔案而是會返回304 Not Modified狀態碼。

服務端判斷該檔案是否發生變化的依據有兩個：Last-Modified（最新修改日期）和ETag（實體標籤）;

ETag（Entity Tags）是在HTTP 1.1引入的，與Last-Modified同時存在時要有更高的優先順序。服務端通過對比客戶端發來的ETag（If-None-Match）和當前ETag，若相同返回304 Not Modifed，否則返回整個檔案以及200 OK。

ETag存在一個問題：當瀏覽器向一個伺服器傳送GET請求原始元件，之後又向另一臺伺服器請求該元件時，ETag是不匹配的，當然，如果你的網站寄宿在一臺伺服器上不存在這個問題，而現在很多網站使用多臺伺服器，ETag的存在就大大降低驗證有效性的成功率。

存在這個問題是時的解決辦法是對ETag進行配置，移除伺服器innode值只保留修改時間戳和大小作為ETag值，或者直接移除ETag，使用Last-Modified來驗證檔案有效性。

四.壓縮元件（減小HTTP請求大小）:

通過對HTTP傳輸的檔案進行壓縮減小HTTP請求的大小，提高請求速度，GZIP是目前最常用也是最有效的壓縮方式。

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

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

五.CSS檔案放在首部:

CSS檔案放在首部和放在尾部，並不影響HTTP請求，因此從請求時間上來講是一致的，然而從使用者體驗的角度，將CSS檔案放在首部，會獲得更好的使用者體驗。原因在於瀏覽器是從上到下依次解析html文件，將CSS檔案置於頭部，頁面會首先對CSS檔案發出請求，隨後載入DOM樹並對其進行渲染，頁面會逐步呈現在使用者面前。

而與之相反，如果將CSS檔案放置在尾部，頁面載入完整DOM之後請求CSS檔案，然後對整個DOM樹渲染並呈現給使用者，從使用者的角度，在css檔案沒有請求完成之前，整個頁面是出於白屏狀態的，白屏是瀏覽器的一種行為，David Hyatt對其的解釋是這樣的：

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

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

六.JS檔案放在尾部:

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

原因有兩個：

（1）.JS檔案中可能存在document.write修改頁面的內容，因此頁面會在指令碼執行完成之後才可使渲染。

（2）.不同JS檔案不管大小如何，可能存在依賴關係，因此必須按照順序進行執行，因此在載入指令碼的時候並行下載是禁止的。

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