通過上篇文章前端效能測試的效能測試和分析，我們基本可以獲取收集到頁面上的具體效能資料，如何根據這些資料採取適當的方法和手段對當前的頁面進行優化呢？目前來看，前端優化的策略很多，如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 2017 23:00:00 GMT" />
複製程式碼6.合理設定 Etag 和 Last-Modified
合理設定 Etag 和 Last-Modified 使用瀏覽器快取，對於未修改的檔案，靜態資源伺服器會向瀏覽器端返回 304 ，讓瀏覽器從快取中讀取檔案，減少 Web 資源下載的頻寬消耗並降低伺服器負載。
<meta http-equiv="Last-Modified" content="Mon, 03 Oct 2017 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> //使用defer時，載入後續文件元素的過程和main.js的載入是並行的，但main.js的執行要在頁面所有元素解析完成之後才開始執行
<script src="//main.js" async></script> //使用async時，載入後續文件元素的過程和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 內資源的下載程式會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM的解析。
6.避免執行耗時的 Javascript
長時間執行的 JavaScript 會阻塞瀏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。所以，任何與頁面初次渲染無關的邏輯功能都應該延遲載入執行，這和 JavaScript 資源的非同步載入思路是一致的。
7.避免使用 CSS 表示式或 CSS 濾鏡
CSS 表示式或 CSS 濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應該儘量避免使用。
//不推薦
.opacity{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
複製程式碼關於桌面瀏覽器頁面優化的常用技術和思路主要包括以上這些，儘管列出很多，但仍可能有少數遺漏，可見前端效能優化不是一件簡簡單單的事情，其涉及的內容很多。大家可以根據實際情況將這些方法應用到自己的專案當中，要想全部做到幾乎是不可能的，但做到使用者可接受的原則還是很容易實現的。歡迎大家加入QQ 前端技術交流群 544587175,技術來自於交流。