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

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