一次完整的 Web 請求和渲染過程以及如何優化網頁

本文主要介紹訪問一個網站時的流程，頁面渲染過程，包括其中涉及到的概念。 以及，咱們如何去優化前端頁面，讓它訪問速度更快。（critical rendering path最佳渲染路徑）

1. 打開瀏覽器，輸入URL
2. DNS解析
3. 完成TCP握手
4. 發送HTTP請求
5. 接收HTTP響應結果
6. 瀏覽器解析HTML，CSS
7. 構建對象模型，DOM tree 和 CSSOM tree，組成render tree
8. 瀏覽器渲染頁面(佈局)

HTTP1.x和HTTP2

在 HTTP/1.x 中，若是客戶端要想發起多個並行請求以提高性能，則必須使用多個 TCP 鏈接。 這是 HTTP/1.x 交付模型的直接結果，該模型能夠保證每一個鏈接每次只交付一個響應（響應排隊）。 更糟糕的是，這種模型也會致使隊首阻塞，從而形成底層 TCP 鏈接的效率低下。 也就是說在目前的HTTP1.X的協議下，瀏覽器對資源的併發請求個數是有限制的。 等到HTTP2到來的時候，經過二進制分幀層進行優化。 HTTP/2 中新的二進制分幀層突破了這些限制，實現了完整的請求和響應複用：客戶端和服務器能夠將 HTTP 消息分解爲互不依賴的幀，而後交錯發送，最後再在另外一端把它們從新組裝起來。

優點：

• 並行交錯地發送多個請求，請求之間互不影響。
• 並行交錯地發送多個響應，響應之間互不干擾。
• 使用一個鏈接並行發送多個請求和響應。

但這些並非咱們可以優化的部分。

基於如今的網絡條件，咱們能夠採用多個CDN地址，進行不一樣源的併發改善優化。 這篇文章主要介紹，第六步開始咱們能夠優化的部分，也就是解析HTML，CSS。

瀏覽器是如何構建對象模型的？

• 字節 → 字符 → 令牌 → 節點 → 對象模型。
• HTML標記與CSS標記都會經歷上述過程，HTML變爲DOM，CSS變爲CSSOM

  

render tree構建，佈局以及繪製

構建好render tree以後，會過濾掉display:none 這種無需渲染的節點。將tree渲染到頁面。

值得注意的是，每一次的dom或者形成佈局影響的變更，都會觸發 reflow(迴流/重排)，會消耗很大的頁面資源。

reflow是因爲dom或者佈局的變更而觸發，如修改了dom位置，或是寬高，margin, padding等。 repaint是樣式風格修改，不影響佈局時觸發，如改了顏色之類的

提升網頁渲染速度，主要能夠減小 DOM, CSSOM處理， 合併render tree，以及 減小reflow的次數

前端頁面優化，減小reflow的方法這裏能夠看看如何減小reflow的次數

對CSS的優化

根據上面的內容咱們知道了，想要渲染頁面必須有render tree，而render tree是由DOM tree以及CSSOM tree組成的。

• 默認下，CSS會阻塞渲染頁面
• 咱們經過@media等，可讓CSS標記爲不阻塞渲染
• 不管是否阻塞渲染，瀏覽器都會將CSS資源下載到客戶端

因此，爲了讓頁面更快的渲染，*咱們必需要儘早的將CSS資源下載到咱們的客戶端。*以及使用@media進行優化

爲了得到最佳性能，你可使用一些inline css，這樣不會去CDN獲取資源，從而形成屢次往返

對JS的優化

當 HTML 解析器遇到一個 script 標記時，它會暫停構建 DOM，將控制權移交給 JavaScript 引擎；等 JavaScript 引擎運行完畢，瀏覽器會從中斷的地方恢復 DOM 構建。

這也就是爲何咱們須要將script tag放在頁面的底部。 /React APP通常會如此使用。由於React須要將整個APP 渲染到一個DOM節點上，若是放置在DOM之上，會形成React找不到該渲染的節點，從而報錯/

而咱們通常不建議在render tree剛剛創建的時候，就使用JS去操做DOM，從而形成reflow，也就是說，但願JS不要成爲render tree的一部分。這個時候，咱們將<script> 放在頁面靠下的部分就能夠不阻塞頁面的渲染。

若是你的<script>是從CDN獲取資源，那麼等待的過程也會形成必定的阻塞。

你能夠將<script>加上 async，讓它變爲異步加載。

爲了實現最佳性能，建議去除關鍵渲染路徑中任何沒必要要的JavaScript

/關鍵渲染路徑是指優先顯示與當前用戶操做有關的內容。/

相關文章：

一次完整的web請求和渲染過程以及如何優化網頁

前端基礎知識之什麼是節點Node？

前端頁面優化，減小reflow的方法