轉載於： https://www.cnblogs.com/littlelittlecat/p/6798918.html
轉載方式： 手打
轉載者： lemon-Xu

前端效能優化

1. 減少HTTP請求次數

儘量合併圖片、CSS、JS。比如載入一個頁面，如果有5個CSS檔案的話，那麼會發出5次http請求，這樣會讓使用者第一次訪問你的頁面的時候會長時間等待。而如果把這5個檔案合成一個的話，就只需要發出一次htto請求。節省網路請求時間，加快頁面的載入。

2. 使用CDN（內容推送網路）

網站上靜態資源即css、js全部使用cnd分發，圖片亦然。

3. 避免空的src和href

當link標籤的href屬性為空、script標籤的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為他們的屬性值，從而把頁面的內容載入進來作為他們的值。所以要避免犯這樣的疏忽。

4. 為標頭檔案執行Expires

Exipres是用來設定檔案的過期時間的，一般對css、js、圖片的資源有效。他可以使內容有快取行，這樣下回再訪問同樣的資源時就通過瀏覽器快取區讀取，不需要再發出http請求。

5. 使用gzip壓縮內容

gzip能夠壓縮任何一個文字型別的響應，包括html、xml、json。大大縮小請求返回的資料量。

6. 把CSS放到頂部

網頁上的資源載入時從上往下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓使用者感覺頁面載入很快

7. 把JS放到底部

載入JS時會對後續的資源造成阻塞，必須得到JS載入完才去載入後續的檔案，所以就把js放在頁面底部最後價值。

8. 避免使用CSS表示式

font-color: expression((new Date().getHours() % 3 ? "#FFFFFF" : "#AAAAAA")；
這個表示式會持續的在頁面上計算樣式，影響頁面的效能。並且css表示式只能被IE支援。

9. 將CSS和JS放到外部檔案中

目的是快取檔案，可以參考原則4.但有時候為了減少請求，也會直接寫道頁面裡，需根據PV和IP的比例權衡

10 權衡DNS查詢次數

減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。

IE瀏覽器在同一時刻只能從同一域名下載兩個檔案。當在一個頁面顯示多張圖片時，IE使用者的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。

11. 精簡CSS和JS

這裡就涉及到css和JS的壓縮了。比如一個css檔案，把空格回車全部去掉，減少檔案的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js檔案的壓縮，如grunt，glup等。

12. 避免跳轉

有種現象會比較坑爹，看起來沒生命差別，其實多了一次頁面跳轉。比如當URL本該有斜槓（/）卻被忽略掉時。例如，當我們要訪問baidu.com時，實際上返回的是一個包含301程式碼的跳轉，他指向的是baicu.com/（注意末尾的斜槓）。在nginx伺服器可以使用rewrite；Apache伺服器種可以使用Alias或者mod_rewrite或者the DirectorySlash來避免。

另一種是不用域名之間的跳轉，比如訪問baidu.om/bbs跳轉到bbs.baidu.com/。那麼可以通過使用Alias或者mode_rewirte建立CNAME（儲存一個域名和另外一個域名之間關係的DNS記錄）來替代。

13. 刪除重複的JS和CSS

重複呼叫指令碼，處了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox不管指令碼是否可快取，他們都存在重複運算JavaScript的問題。

14. 配置ETags

它用來判斷瀏覽器快取裡的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個檔案在1秒內修改了10次，Etag可以綜合Inode（檔案的索引點（inode）數），MTime（修改時間）和Size來精準的進行判斷，避開UNIX記錄MTime只能精準到秒的問題。伺服器叢集使用，可取後兩個引數。使用ETags減少Web應用頻寬和負載

15. 可快取的AJAX

非同步請求同樣的造成使用者等待，所以使用Ajax請求時，要主動告訴瀏覽器如果該請求有快取就去請求快取內容。如下程式碼片段， cache：true就是顯示的要求如果當前請求有快取的話，直接使用快取

$.ajax({ url: "url", dataType:"json", cache: true, success: fucntion(son, status)})

16. 使用GET來完成AJAX請求

當使用XMLHttpRequest時，瀏覽器中的POST方法是一個”兩步走“的過程：首先發送檔案頭，然後才傳送資料。因此使用GET獲取資料時更加有意義。

17. 減少DOM元素數量

這是一門大學問，這裡可以引申出一堆優化的細節。想要具體研究的時候可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。

18. 避免404

比如外聯的css、js檔案出現問題返回404時，會破壞瀏覽器的並行載入。

19. 減少Cookie的大小

Cookie裡面別賽那麼多東西，因為每個請求都得帶著他跑。

20. 使用無cookie的域

比如CSS、js、圖片等，客戶端請求靜態檔案的時候，減少了Cookie的反覆傳輸對主域名的影響。

21. 不要使用濾鏡

IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了記憶體開支，因此它的問題是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter使之對IE7以上版本的使用者無效。

22. 不要再HTML中縮放圖片

比如你需要的圖片尺寸是50 * 50
那就不用用一張500 * 500的大尺寸圖片，影響載入

23. 縮小favicon.ico並快取

以上是Yslow的23個優化原則，基本可以涵蓋現在前端大部分的效能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延申出來的。

《高效能網站建設指南（第二版》，這裡面其實就是細化的講解了上面的23原則。