HTTP是一種客戶端/服務器協議，由請求和響應構成。瀏覽器向一個特定的URL發送HTTP請求，URL對應的宿主服務器發回HTTP響應。該協議使用簡單的純文本格式。請求的類型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE。

前端性能優化十四個規則：

1. 減少HTTP請求。

a. 至少80%的最終用戶響應時間花在了頁面中的組件（圖片、腳本、樣式表、Flash等）上。

b. 改善響應時間的最簡單途徑就是減少組件的數量，並由此減少HTTP請求的數量。這些技術包括圖片地圖、CSS Sprites、內聯圖片和腳本、樣式表的合並。運用這些技術在示例頁面上估計響應時間減少到50%左右。

c. 圖片地圖：

優點：允許在一個圖片上關聯多個URL，目標URL的選擇取決於用戶點擊了圖片上的那個位置。這樣既能減少HTTP請求，又無需改變頁面外觀感受。

缺點：在定義圖片地圖上的區域坐標時，如果采取手工的方式則很難完成且容易出錯，而且除了矩形之外幾乎無法定義其他形狀。通過DHTML穿件的圖片地圖則在IE中無法工作。

類型：圖片地圖有兩種類型。服務器端圖片地圖將所有點擊提交到同一個目標URL，向其傳遞用戶單擊的x、y坐標。Web應用程序將該x、y坐標映射為適當的操作。客戶端圖片地圖將用戶的點擊映射到一個操作，而無需向後端應用程序發送請求。映射通過HTML的MAP標簽實現。

d. CSS Sprites

e. 內連圖片

f. 合並腳本和樣式表

2. 使用內容發布網絡（CDN）

a. 內容發布網絡（CDN）是一組分布在多個不同地理位置的Web服務器，用於更加有效地向用戶發布內容。

優點：縮短響應時間、備份、擴展存儲能力和進行緩存、緩和Web流量峰值壓力。CDN用於發布靜態內容，如圖片、腳本、樣式表和Flash，提供動態HTML頁面會引入特殊的存儲需求——數據庫連接、狀態管理、驗證、硬件和OS優化等，這些操作比較復雜。另一方面，靜態文件更容易存儲並具有較少的依賴性。

缺點：響應時間可能會受到其他網站的影響，以及無法直接控制組件服務器所帶來的特殊麻煩，且嚴重依賴CDN的服務性能。

無論如何也不要使用HTTP重定向來將用戶指向到本地服務器，這會使Web頁面反應速度變慢。

3. 添加Expires頭

a. Expires頭

瀏覽器（和代理）使用緩存來減少HTTP請求的數量，並減少HTTP響應的大小，使Web頁面加載得更快。Web服務器使用Expires頭來告訴Web客戶端它可以使用一個組件的當前副本，直到指定的時間為止。它在HTTP響應中發送。

缺點：因為Expires頭使用一個特定的時間，它要求服務器和客戶端的時鐘嚴格同步。另外，過期日期需要經常檢查，並且一旦這一天到來，還需要在服務器配置中提供一個新的日期。

圖片可緩存30天以上。

樣式表可緩存30天以上。

腳本可緩存30天以上。

b. Max-Age和mod_expires

HTTP1.1引入了Cache-Control頭來克服Expires頭的限制。Cache-Control使用max-age指令指定組件被緩存多久。它以秒為單位定義了一個更新窗。如果從組件被請求開始過去的秒數少於max-age，瀏覽器就使用緩存的版本，這就避免了額外的HTTP請求。如果同時出現Expires頭和Cache-Control max-age，max-age指令將重寫Exipres頭。

mod_expires Apache模塊，能夠讓Expires頭像max-age那樣以相對的方式設置日期。這通過ExpiresDefault指令來完成。

c. 空緩存VS完整緩存

指的是與頁面相關的瀏覽器緩存的狀態。

d. 修改文件名

為了確保用戶能夠獲取組件的最新版本，需要在所有HTML頁面中修改組件的文件名。嵌入版本號即可。

4. 壓縮組件

a. 通過減小HTTP響應的大小來減少響應時間。

b. 從HTTP1.1開始，Web客戶端可以通過HTTP請求中的Accept-Encoding頭來標識對壓縮的支持。 Accept-Encoding:gzip,deflate。 如果Web服務器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來壓縮響應。Web服務器通過響應中的Content-Encoding頭來通知Web客戶端，如：Content-Encoding: gzip。

c. 網站會壓縮其HTML文檔、腳本和樣式表等。圖片和PDF不應該壓縮，因為他們本來就已經被壓縮了。試圖對它們進行壓縮只會浪費CPU資源，還有可能會增加文件大小。

d. 壓縮的成本有，服務器端會花費額外的CPU周期來完成壓縮，客戶端要對壓縮文件進行解壓縮。要檢測收益是否大於開銷，需要考慮響應的大小、連接的帶寬和客戶端與服務器之間的Internet距離。

e. 代理緩存。在Web服務器的相應中添加Vary頭。Web服務器可以告訴代理根據一個或多個請求頭來改變緩存的響應。由於壓縮的決定是基於Accept-Encoding請求頭的，因此需要在服務器的Vary響應頭中包含Accept-Encoding。Vary：Accept-Encoding。

f. 如果擁有大量的、多變的用戶群，能夠應付較高的帶寬開銷，並且享有高質量的名聲，請壓縮內容並使用Cache-Control:Private。這禁用了代理，但避免了邊緣情形缺陷。

5. 將樣式表放在頂部

a. 盡量多使用link標簽，少使用@import標簽。因為@import標簽規則必須放在其他規則之前，也有可能會導致白屏現象，即使把@import規則放在文檔的HEAD標簽中也是如此。

6. 將腳本放在底部

a. 在下載腳本時並行下載實際上是被禁用的——即使使用了不同的主機名，瀏覽器也不會啟動其他的下載。其中一個原因是，腳本可能使用document.write來修改頁面內容，因此瀏覽器會等待，以確保頁面能夠恰當地布局。另外一個原因是，為了保證腳本能夠按照正確的順序執行。

b. 腳本對Web頁面的影響：腳本會阻塞對其後面內容的呈現，以及腳本會阻塞對其後面組件的下載。

//以下規則用於處理頁面加載之後的性能問題。

7. 避免CSS表達式

//min-width的兼容性

width:expression(document.body.clientWidth<600?”600px”:”auto”); //IE

min-width:600px; //大部分瀏覽器

存在問題：更新表達式

a. 一次性表達式，在這一次執行中重寫它自身。

b. 事件處理器。

8. 使用外部JavaScript和CSS

純粹而言，內聯快一些。但現實中還是使用外部文件會產生較快的頁面。因為JavaScript和CSS文件有機會被瀏覽器緩存起來。HTML文檔通常不會被配置為可以緩存。另外，由於外聯，HTML文檔減小，HTTP請求的數量也不會增加。

9. 減少DNS查找

a. DNS緩存和TTL(Time-to-live)

DNS查找可以被緩存起來提高性能。服務器可以表明記錄可以被緩存多久。查找返回的DNS記錄包含了一個存活時間TTL值。該值告訴客戶端可以對該記錄緩存多久。盡管操作系統緩存會考慮TTL值，但瀏覽器通常忽略該值，並設置它自己的時間限制。

10. 精簡JavaScript

a. 精簡是從代碼中移除不必要的字符以減小其大小，進而改善加載時間的實踐。

b. 壓縮，並建議使用gzip來完成壓縮。

c. 精簡CSS。通常CSS中的註釋和空白比JavaScript少。優化CSS——合並相同的類、移除不使用的類等。

11. 避免重定向

a. 重定向用與將用戶從一個URL重新路由到另一個URL。

b. 304並不是真的重定向——它用來響應條件GET請求，避免下載已經存在於瀏覽器緩存中的數據。

c. 狀態碼301和302是使用得最多的。狀態碼303和307是在HTTP1.1規範中添加的。但是幾乎沒有人用303和307，絕大多數網站仍然在沿用302.301響應的示例如下：

HTTP 1.1 301 Moved Permanently

Location: http://stevesouders.com/newuri

Content-Type: text/html

瀏覽器會自動將用戶帶到Location字段所給出的URL，響應體通常是空的。不管叫什麽名字，301和302響應在實際中都不會被緩存，除非有附加的頭——如Expires或Cache-Control等要求它這麽做。

d. 重定向延遲了整個HTML文檔的傳輸，在HTML文檔到達之前，頁面中不會呈現出任何東西，也沒人有任何組件會被下載。在用戶和HTML文檔之間插入重定向延遲了頁面中的所有東西。

e. 當缺少結尾的斜線時發送重定向——它允許自動索引，自動轉到默認的index.html上，並且能夠獲得與當前目錄相關的URL。

12. 移除重復腳本

確保腳本只被包含一次。

13. 配置ETag

a. ETag(Entity Tag)實體標簽是Web服務器和瀏覽器用於確認緩存組件的有效性的一種機制。

b. ETag是HTTP1.1中引入的。ETag是唯一標識了一個組件的一個特定版本的字符串。唯一的格式約束是該字符串必須用引號引起來。

c. ETag的加入為驗證實體提供了比最新修改日期更為靈活的機制。

d. 例如，如果實體依據User-Agent或Accpt-Language頭而改變，實體的狀態可以反映到ETag中。此後，如果瀏覽器必須驗證一個組件，它會使用If-None-Match頭將ETag傳回原始服務器。如果ETag是匹配的，就會返回304狀態碼，使響應減小了1195字節。

14. 使Ajax可緩存

確保Ajax請求遵守性能知道，尤其應具有長久的Expires頭。

原文鏈接：https://blog.csdn.net/lysunnyrain/article/details/51068508

前端性能優化十四個規則：