頁面性能優化

頁面性能優化是前端從未中止探討的問題，雅虎將 web 頁面的優化分爲 7 部分，總結了 35 條軍規。這裏，總結頁面從輸入回車到內容展示這一過程當中的優化方法，主要目的是爲了縮短頁面的渲染時間，使頁面內容儘量快的展現出來。

 

初次加載頁面，瀏覽器請求資源到接收到該資源之間，須要經歷一段漫長的網絡傳輸過程。

 

DNS 解析

瀏覽器請求一個網絡資源，如 html、css、js、img等，如 baidu.com，這是域名，方便人們記憶，但機器只認 IP 地址。爲了可以找到正確的服務器，就須要 DNS 解析，找到對應的 IP。當瀏覽器遇到一個新的域名，就須要進行一次 DNS 解析。

頁面中的外部資源域名越多，須要的 DNS 解析總時間就越長。所以，外部資源的域名個數應儘量的少。

 

根據 IP 地址請求資源

當 DNS 解析完，獲取到對應的 IP 地址後，瀏覽器會向該服務器發送請求，創建 TCP 鏈接。不一樣瀏覽器對於同一域名的併發鏈接數量均有限制，2~8個。若是外部資源均部署在同一服務器上，當數量超過瀏覽器的限制時，就會形成阻塞，後面的資源須要等待前面的資源接受完後才能發送請求。也就是說，外部資源應該儘量多的部署到不一樣的服務器上，但這與上文的 DNS 解析優化矛盾了。所以，須要作一個衡量，外部資源應該部署到多少個不一樣的服務器上。

 

TCP 鏈接優化

TCP 每次鏈接都須要通過三次握手才能創建起來，這是一個耗時的操做。

能夠經過合併靜態資源，如合併 css、js，使用雪碧圖的方式減小外部資源請求次數，從而減小 TCP 鏈接次數。

（雅虎軍規：避免 img 的 src 爲空）src爲空，瀏覽器仍是會向服務器發送請求的。

 

資源傳輸

除去網絡因素，資源傳輸所需的時長取決於該資源的大小，以及接收方與發送方的物理距離。

（雅虎軍規：壓縮 css、js）減小文件體積。

（雅虎軍規：使用 CDN）將靜態文件部署到 CND 上，減小接收方與實際發送方的距離。

 

CRP

瀏覽器從接收到 html 文件，到頁面內容繪製出來之間一樣發生了不少事情。瀏覽器初次繪製頁面的過程稱爲「關鍵渲染路徑」。

對 CRP 不熟悉的能夠參看理解關鍵渲染路徑這篇譯文。

CRP 主要有 6 部分：

一、構建 DOM 樹

二、構建 CSSOM 樹

三、運行 js

四、建立 render 樹

五、佈局

六、繪製

 

構建 DOM 樹

當瀏覽器接收到 html 文件後，開始解析文件，構建 DOM 樹。（雅虎軍規：減小 DOM 元素的數量）DOM 元素數量越少，html 文件體積就越小，構建 DOM 樹的速度也就越快。因爲 DOM 樹的構建過程是一個深度遍歷的過程，DOM 樹結構層次不要過深可以加快遍歷，其次，也是爲了後續 js 可以更快的訪問 DOM 。

 

構建 CSSOM 樹

（雅虎軍規：將樣式表放在頂部）在解析 html 時，遇到外部資源瀏覽器會當即發送請求。儘量快的加載樣式表，構建 CSSOM 樹，與 DOM 樹一塊兒建立 render 樹，讓頁面可以逐步渲染，儘快的現實出內容。

 

運行js

（雅虎軍規：將 js 放在底部）由於 js 腳本會阻塞 html 的解析，不論是內聯仍是外聯，通常會將 js 放置在底部。

 

佈局、繪製

這裏會涉及到頁面的迴流（reflow）和重繪（repaint）。頁面若是有 <img>，爲它設置寬高，而不是等待 src 的圖片加載完後將 img 撐開，這樣可以避免頁面的迴流。