前端性能優化（一）：桌面瀏覽器前端優化策略
摘要: 前端性能優化是一個很寬泛的概念，本書前面的部分也多多少少提到一些前端優化方法，這也是我們一直在關註的一件重要事情。配合各種方式、手段、輔助系統，前端優化的最終目的都是提升用戶體驗，改善頁面性能，我們常常竭盡全力進行前端頁面優化，但卻忽略了這樣做的效果和意義。先不急於探究前端優化具體可以怎樣去做，先看看什麽是前端性能，應該怎樣去了解和評價前端頁面的性能。
通過性能測速和分析，我們基本可以獲取收集到頁面上大部分的具體性能數據，如何根據這些數據采取適當的方法和手段對當前的頁面進行優化呢？目前來看，前端優化的策略很多，如YSlow（YSlow是Yahoo發布的一款Firefox插件，可以對網站的頁面性能進行分析，提出對該頁面性能優化的建議）原則等，總結起來主要包括網絡加載類、頁面渲染類、CSS優化類、JavaScript執行類、緩存類、圖片類、架構協議類等幾類，下面逐一介紹。
一、 網絡加載類
1．減少HTTP資源請求次數
在前端頁面中，通常建議盡可能合並靜態資源圖片、JavaScript或CSS代碼，減少頁面請求數和資源請求消耗，這樣可以縮短頁面首次訪問的用戶等待時間。通過構建工具合並雪碧圖、CSS、JavaScript文件等都是為了減少HTTP資源請求次數。另外也要盡量避免重復的資源，防止增加多余請求。
2．減小HTTP請求大小
除了減少HTTP資源請求次數，也要盡量減小每個HTTP請求的大小。如減少沒必要的圖片、JavaScript、CSS及HTML代碼，對文件進行壓縮優化，或者使用gzip壓縮傳輸內容等都可以用來減小文件大小，縮短網絡傳輸等待時延。前面我們使用構建工具來壓縮靜態圖片資源以及移除代碼中的註釋並壓縮，目的都是為了減小HTTP請求的大小。
3．將CSS或JavaScript放到外部文件中，避免使用<style>或<script>標簽直接引入
在HTML文件中引用外部資源可以有效利用瀏覽器的靜態資源緩存，但有時候在移動端頁面CSS或JavaScript比較簡單的情況下為了減少請求，也會將CSS或JavaScript直接寫到HTML裏面，具體要根據CSS或JavaScript文件的大小和業務的場景來分析。如果CSS或JavaScript文件內容較多，業務邏輯較復雜，建議放到外部文件引入。
<link rel="stylesheet" href="//cdn.domain.com/path/main.css"><script src="//cdn.domain.com/path/main.js"></script>
4．避免頁面中空的href和src
當<link>標簽的href屬性為空，或<script>、<img>、<iframe>標簽的src屬性為空時，瀏覽器在渲染的過程中仍會將href屬性或src屬性中的空內容進行加載，直至加載失敗，這樣就阻塞了頁面中其他資源的下載進程，而且最終加載到的內容是無效的，因此要盡量避免。
<!-- 不推薦 --><img src="" alt="photo"><a href="">點擊鏈接</a>
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="Mon, 20 Jul 2016 23:00:00 GMT" />
6．合理設置Etag和Last-Modified
合理設置Etag和Last-Modified使用瀏覽器緩存，對於未修改的文件，靜態資源服務器會向瀏覽器端返回304，讓瀏覽器從緩存中讀取文件，減少Web資源下載的帶寬消耗並降低服務器負載。
<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 17:45:57 GMT"/>
7． 減少頁面重定向
頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約需要600毫秒的時間開銷，為了保證用戶盡快看到頁面內容，要盡量避免頁面重定向。
8．使用靜態資源分域存放來增加下載並行數
瀏覽器在同一時刻向同一個域名請求文件的並行下載數是有限的，因此可以利用多個域名的主機來存放不同的靜態資源，增大頁面加載時資源的並行下載數，縮短頁面資源加載的時間。通常根據多個域名來分別存儲JavaScript、CSS和圖片文件。
<link rel="stylesheet" href="//cdn1.domain.com/path/main.css"><script src="//cdn2.domain.com/path/main.js"></script>
9．使用靜態資源CDN來存儲文件
如果條件允許，可以利用CDN網絡加快同一個地理區域內重復靜態資源文件的響應下載速度，縮短資源請求時間。
10．使用CDN Combo下載傳輸內容
CDN Combo是在CDN服務器端將多個文件請求打包成一個文件的形式來返回的技術，這樣可以實現HTTP連接傳輸的一次性復用，減少瀏覽器的HTTP請求數，加快資源下載速度。例如同一個域名CDN服務器上的a.js，b.js，c.js就可以按如下方式在一個請求中下載。
<script src="//cdn.domain.com/path/a.js,b.js,c.js"></script>
11．使用可緩存的AJAX
對於返回內容相同的請求，沒必要每次都直接從服務端拉取，合理使用AJAX緩存能加快AJAX響應速度並減輕服務器壓力。
$.ajax({ url: url, type: ‘get‘, cache: true, // 推薦使用緩存 data: {} success(){ // ... }, error(){ // ... }});
12．使用GET來完成AJAX請求
使用XMLHttpRequest時，瀏覽器中的POST方法發送請求首先發送文件頭，然後發送HTTP正文數據。而使用GET時只發送頭部，所以在拉取服務端數據時使用GET請求效率更高。
$.ajax({ url: url, type: ‘get‘, // 推薦使用get完成請求 data: {} success(){ // ... }, error(){ // ... }});
13．減少Cookie的大小並進行Cookie隔離
HTTP請求通常默認帶上瀏覽器端的Cookie一起發送給服務器，所以在非必要的情況下，要盡量減少Cookie來減小HTTP請求的大小。對於靜態資源，盡量使用不同的域名來存放，因為Cookie默認是不能跨域的，這樣就做到了不同域名下靜態資源請求的Cookie隔離。
14．縮小favicon.ico並緩存
有利於favicon.ico的重復加載，因為一般一個Web應用的favicon.ico是很少改變的。
15．推薦使用異步JavaScript資源
異步的JavaScript資源不會阻塞文檔解析，所以允許在瀏覽器中優先渲染頁面，延後加載腳本執行。例如JavaScript的引用可以如下設置，也可以使用模塊化加載機制來實現。
<script src="main.js" defer></script><script src="main.js" async></script>
使用async時，加載和渲染後續文檔元素的過程和main.js的加載與執行是並行的。使用defer時，加載後續文檔元素的過程和main.js的加載是並行的，但是main.js的執行要在頁面所有元素解析完成之後才開始執行。
16．消除阻塞渲染的CSS及JavaScript
對於頁面中加載時間過長的CSS或JavaScript文件，需要進行合理拆分或延後加載，保證關鍵路徑的資源能快速加載完成。
17．避免使用CSS import引用加載CSS
CSS中的@import可以從另一個樣式文件中引入樣式，但應該避免這種用法，因為這樣會增加CSS資源加載的關鍵路徑長度，帶有@import的CSS樣式需要在CSS文件串行解析到@import時才會加載另外的CSS文件，大大延後CSS渲染完成的時間。
<!-- 不推薦 --><style>@import "path/main.css";</style><!-- 推薦 --><link rel="stylesheet" href="//cdn1.domain.com/path/main.css">
二、 頁面渲染類
1．把CSS資源引用放到HTML文件頂部
一般推薦將所有CSS資源盡早指定在HTML文檔<head>中，這樣瀏覽器可以優先下載CSS並盡早完成頁面渲染。
2．JavaScript資源引用放到HTML文件底部
JavaScript資源放到HTML文檔底部可以防止JavaScript的加載和解析執行對頁面渲染造成阻塞。由於JavaScript資源默認是解析阻塞的，除非被標記為異步或者通過其他的異步方式加載，否則會阻塞HTML DOM解析和CSS渲染的過程。
3．不要在HTML中直接縮放圖片
在HTML中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要盡量減少在頁面中直接進行圖片縮放。
4．減少DOM元素數量和深度
HTML中標簽元素越多，標簽的層級越深，瀏覽器解析DOM並繪制到瀏覽器中所花的時間就越長，所以應盡可能保持DOM元素簡潔和層級較少。
<!-- 不推薦 --><div> <span> <a href="javascript: void(0);"> <img src="./path/photo.jpg" alt="圖片"> </a> </span></div><!-- 推薦 --><img src="./path/photo.jpg" alt="圖片">
5．盡量避免使用<table>、<iframe>等慢元素
<table>內容的渲染是將table的DOM渲染樹全部生成完並一次性繪制到頁面上的，所以在長表格渲染時很耗性能，應該盡量避免使用它，可以考慮使用列表元素<ul>代替。盡量使用異步的方式動態添加iframe，因為iframe內資源的下載進程會阻塞父頁面靜態資源的下載與CSS及HTML DOM的解析。
6．避免運行耗時的JavaScript
長時間運行的JavaScript會阻塞瀏覽器構建DOM樹、DOM渲染樹、渲染頁面。所以，任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行，這和JavaScript資源的異步加載思路是一致的。
7．避免使用CSS表達式或CSS濾鏡
CSS表達式或CSS濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應該盡量避免使用。
// 不推薦.opacity{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
ps：IT技術之家前端性能優化（一）：桌面瀏覽器前端優化策略