頁面性能優化是前端從未停止探討的問題，雅虎將 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 部分：

1、構建 DOM 樹

2、構建 CSSOM 樹

3、運行 js

4、創建 render 樹

5、布局

6、繪制

構建 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 撐開，這樣能夠避免頁面的回流。

頁面性能優化