淺談前端性能優化（PC版）

前端的性能優化是一個很寬泛的概念，最終目的都是爲了提高用戶體驗，改善頁面性能。面試的時候常常會遇到問談談性能優化的手段，這個我分幾大部分來概述，具體細節須要本身再針對性的去搜索，只是提供一個索引（太多了寫不過來+主要是懶得寫）。這裏PC端和移動端分開說了，業務場景不一樣，須要考慮各自的優化手段

目前來看，前端優化的策略有不少，主要包括網絡加載，頁面渲染，CSS優化，JS執行優化，緩存，圖片，協議幾大類。這一篇先講PC端的優化策略

---

網絡加載

1. 減小HTTP請求次數

建議儘量的根據須要去合併靜態資源圖片、JavaScript代碼和CSS文件，減小頁面請求數，這樣能夠縮短頁面首次訪問的等待時間，另外也要儘可能的避免重複資源，防止增長多餘的請求

2. 減小HTTP請求大小

除了減小請求資源數，也要減小每一個http請求的大小。好比減小不必的圖片，JS，CSS以及HTML等，對文件進行壓縮優化，開啓GZIP壓縮傳輸內容，縮短網絡傳輸等待延遲

3. 將CSS和JS放到外部文件中，避免使用style和script標籤引入

在HTML文件中引入外部的資源能夠有效利用瀏覽器的靜態資源緩存。有時候在移動端對請求數比較在乎的會爲了減小請求把CSS和JS文件直接寫到HTML裏邊，具體根據CSS和JS文件大小和業務場景來分析。若是CSS和JS文件內容較多，邏輯比較複雜，建議放到外部引入
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

4. 避免頁面中空的href和src

當link標籤的href屬性爲空，或者script、img、iframe標籤的src屬性爲空的時候，瀏覽器在渲染的過程當中仍是會把href和src的空內容進行加載，直到加載失敗。這樣就阻塞了頁面中其餘資源的下載進程，而且最後加載的內容是無效的，所以要儘可能避免。

<!-- 不推薦 --> <img src="" alt="佔位圖"/> 

5. 爲HTML指定Cache-Control或者Expires

爲HTML指定Cache-Control或者Expires能夠將HTML內容緩存起來，避免頻繁向服務器發送請求。在頁面Cache-Control或Expires頭部又消失，瀏覽器會直接從緩存讀取內容，不向服務器發送請求

<meta http-equiv="Cache-Control" content="max-age=7200" /> <meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT"＞ 

6. 合理設置Etag和Last-Modified

對於未修改的文件，靜態資源服務器會向瀏覽器端返回304，讓瀏覽器從緩存中讀取文件，減小下載的帶寬消耗並能減小服務器的負載
<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">

7. 減小頁面重定向

一次重定向大概600毫秒的時間開銷，爲了保證用戶能儘快看到頁面內容，儘可能避免頁面的重定向

8. 靜態資源不一樣域名存放

瀏覽器在同一時刻向同一個域名請求文件的並行下載數是有限的，所以能夠理由多個域名的主機來存放不一樣的靜態資源，增大頁面加載時資源的並行下載數。

9. 使用靜態資源CDN來存儲文件

詳情搜索CDN空間

10. 使用CDN Combo下載傳輸內容

CDN的combo技術能把多個資源文件合併引用，減小請求次數。這樣能夠減小瀏覽器HTTP請求數，加快資源下載速度。好比淘寶的寫法：

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css"> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script> 

參考: http://www.cnblogs.com/zhengyun_ustc/archive/2012/07/18/combo.html

11. 使用可緩存的AJAX

對於內容相同的請求，有時候不必每次都從服務器拉取，合理的使用ajax緩存能加快ajax響應速度並減小服務器的壓力

$.ajax({
    url : url, dataType : "json", cache: true, success: function(data){ // to do something... } }); 

12. 使用get請求

POST請求會首先發送文件頭，而後發送HTTP正文的數據。而使用GET只發送頭部，因此在拉取數據時使用GET請求效率更高

13. 減小Cookie的大小並進行Cookie隔離

HTTP請求默認是會帶上瀏覽器端的Cookie一塊兒發送給服務器端的，因此在非必要的狀況下要儘可能減小Cookie。對於靜態的資源，儘可能使用不一樣的域名存放，由於Cookie默認也是不能跨域的，這就作到了不一樣域名下靜態資源請求的Cookie隔離

14. 減小favicon.ico 並緩存

通常一個web應用的favicon.ico是不多改變的，。有利於favicon.ico的重複加載

15. 異步的加載JavaScript資源

異步的JavaScript資源不會阻塞文檔解析，因此瀏覽器會優先渲染頁面，延遲加載腳本執行。

<script src="main.js" defer></script> <script src="main.js" async></script> 

16. 消除阻塞頁面的CSS和JS

對於頁面中加載時間過長的CSS或JS文件，須要進行合理的拆分或者延後加載，保證關鍵的資源能快速加載完成

17. 避免使用CSS import 引用加載CSS

18. 使用prefetch來完成網站預加載

讓瀏覽器預先加載用戶訪問當前頁後極有可能訪問的其餘資源(頁面，圖片，視頻等)，從而讓用戶有更好的體驗

19. 按需加載

這個跟第二條差很少，特別作單頁應用的時候要注意（移動端部分會着重說明）

---

頁面渲染類

1. 把CSS資源引用放到HTML文件頂部

這樣瀏覽器能夠優先下載CSS並儘快完成頁面渲染

2. JavaScript文件引用放到HTML文件底部

能夠防止JavaScript的加載和解析執行對頁面渲染形成阻塞。因爲JavaScript資源默認是解析阻塞的，除非被標記爲異步或者經過其餘的方式異步加載，不然會阻塞HTML DOM解析和CSS渲染過程

3. 不要在HTML中直接縮放圖片

在HTML中直接縮放圖片會致使頁面內容的重排重繪，此時可能會使頁面中的其餘操做產生卡頓，所以要儘可能減小在頁面中直接進行圖片縮放

4. 減小DOM元素數量和深度

HTML中標籤元素約的，標籤的層級越深，瀏覽器解析DOM並繪製到瀏覽器中說花的時間就越長。

5. 儘可能避免使用table、iframe等慢元素

<table>內容的渲染是講table的DOM渲染樹所有生成完並一次性繪製到頁面上，因此在長表格渲染時很耗性能，應該儘可能避免使用，能夠考慮用ul代替。儘可能使用異步的方式動態的加載iframe，由於iframe內資源的下載進程會阻塞父頁面靜態資源的下載以及HTML DOM的解析

6. 避免運行耗時的JavaScript

長時間運行的JavaScript會阻塞瀏覽器構建DOM樹、DOM渲染樹、渲染頁面。因此任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行，這和JavaScript資源的異步加載思路一致

7. 避免使用CSS表達式和CSS濾鏡

CSS表達式和濾鏡的解析渲染速度是很慢的，再有其餘解決方案的狀況下應該儘可能避免使用

// 不推薦 .opacity{ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false) } 

---

至此，PC部分的性能優化點介紹完了。有一些沒有講到的諸如DNS預解析，離線緩存，HTTP2協議，GPU加速等，想着移動端的優化更細，這些內容放到移動端再講會好一點。由於PC端因爲兼容性的問題，不少的優化策略也不能很好的向降低級。儘管列舉了不少，但還有少部分遺漏的，歡迎你們補充。前端優化不是一件簡簡單單的事情，其涉及的內容不少，你們能夠根據實際狀況將這些方法應用到本身的項目當中去。

做者：_CatBone 連接：http://www.jianshu.com/p/ead7dab72cd6 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。