10分鐘看懂瀏覽器的渲染過程及優化

1、瀏覽器概述

目前的主流瀏覽器有5個：Internet Explorer、Firefox、Safari、Chrome和Opera瀏覽器。根據 StatCounter 瀏覽器統計數據，目前（截止2019 年 5 月）Firefox、Safari 和 Chrome 瀏覽器的總市場佔有率將近 83.66%。因而可知，現在開放源代碼瀏覽器在瀏覽器市場中佔據了很是堅實的部分。
以上5種瀏覽器因爲有着不一樣的瀏覽器內核，形成一樣的html頁面有着不一樣呈現。Internet Explorer的內核是Trident；Firefox的內核是Gecko；Chrome、Safari內核是Webkit；Opera的內核則是Presto。css

2、瀏覽器渲染過程

咱們先大體看下瀏覽器渲染關鍵路徑圖： html

一、HTML解析，構建DOM樹

瀏覽器從網絡或硬盤中得到HTML字節數據後會通過如下流程將字節解析爲DOM樹：web

字符編碼：先將HTML的原始字節數據轉換爲文件指定編碼的字符。
令牌化：而後瀏覽器會根據HTML規範來將字符串轉換成各類令牌（如<html>、<body>、<p>這樣的標籤以及標籤中的字符串和屬性等都會被轉化爲令牌，每一個令牌具備特殊含義和規則）。
生成節點對象：接着每一個令牌都會被轉換成定義其屬性和規則的對象，即節點對象。
構建DOM樹：最後將節點對象構建成樹形結構，即DOM樹。HTML標籤之間有複雜的父子關係，樹形結構恰好能夠詮釋這樣的關係。

下面經過一段HTML代碼與配圖更好的理解「字節 -> 字符 -> 令牌-> 節點對象 -> 對象模型」這個過程：瀏覽器

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="test.png"></div>
  </body>
</html>
複製代碼

DOM樹構建過程

二、CSS解析，構建CSSOM樹

瀏覽器解析遇到<link>標籤時，瀏覽器就開始解析CSS，像構建DOM樹同樣構建CSSOM樹。style.css的代碼以下：緩存

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
複製代碼

CSSOM樹

三、Render Tree

在構建了DOM樹和CSSOM樹以後，瀏覽器只是擁有2個相互獨立的對象集合，DOM樹描述的文檔結構和內容，CSSOM樹描述了對應文檔的樣式規則，想要渲染出頁面，就須要將DOM樹、CSSOM樹結合在一塊兒，構建渲染樹。性能優化

渲染樹

四、Layout

渲染樹構建好後，瀏覽器獲得了每一個節點的內容與樣式，下一步就是須要計算每一個節點在瀏覽器窗口的確切位置與大小，即layout佈局。
佈局階段，從渲染樹的根節點開始遍歷，採用盒子模型的模式來表示每一個節點與其餘元素之間的距離，從而肯定每一個元素在屏幕內的位置與大小。bash

盒子模型：包括外邊距（margin），內邊距（padding），邊框（border），內容（content）。標準盒子模型width/height = content；IE盒子模型width/height = content + padding + border。服務器

盒子模型

五、Paint繪製頁面

當Layout佈局完成後，瀏覽器會當即發出Paint事件，開始講渲染樹繪製成像素，繪製所須要的時間跟CSS樣式的複雜度成正比，繪製完成後，用戶才能看到頁面在屏幕中的最終呈現效果。markdown

若是想更詳細地體驗瀏覽器渲染流程，可使用Chrome開發者工具中的Performance面板，錄製瀏覽器從請求直到渲染完成的過程，以下圖所示：網絡

Performance

3、渲染優化方案

一、優化渲染關鍵路徑方案

經過優化渲染關鍵路徑，能夠優化頁面渲染性能，減小頁面白屏時間。

優化JS：JavaScript文件加載會阻塞DOM樹的構建，能夠給<script>標籤添加異步屬性async，這樣瀏覽器的HTML解析就不會被js文件阻塞。
優化CSS：瀏覽器每次遇到<link>標籤時，瀏覽器就須要向服務器發出請求得到CSS文件，而後才繼續構建DOM樹和CSSOM樹，能夠合併全部CSS成一個文件，減小HTTP請求，減小關鍵資源往返加載的時間，優化渲染速度。

二、其餘優化方案

加載部分HTML
瀏覽器先加載主要HTML初始化靜態部分，動態變化的HTML內容經過Ajax請求加載。這樣能夠減小瀏覽器構建DOM樹的工做量，讓用戶感受頁面加載速度很快。
壓縮
對HTML、CSS、JavaScript這些文件去除冗餘字符（例如沒必要要的註釋、空格符和換行符等），再進行壓縮，減少文件數據大小，加快瀏覽器解析文件編碼。
圖片加載優化
1）小圖標合併成雪碧圖，進而減小img的HTTP請求次數；
2）圖片加載較多時，採用懶加載的方案，用戶滾動頁面可視區時再加載渲染圖片。
HTTP緩存
瀏覽器自帶了HTTP緩存的功能，只須要確保每一個服務器響應的頭部都包含了如下的屬性：
1）ETag： ETag是一個傳遞驗證令牌，它對資源的更新進行檢查，若是資源未發生變化時不會傳送任何數據。當瀏覽器發送一個請求時，會把ETag一塊兒發送到服務器，服務器會根據當前資源覈對令牌（ETag一般是對內容進行Hash後得出的一個指紋），若是資源未發生變化，服務器將返回304 Not Modified響應，這時瀏覽器沒必要再次下載資源，而是繼續複用緩存。
2）Cache-Control： Cache-Control定義了緩存的策略，它規定在什麼條件下能夠緩存響應以及能夠緩存多久。
a、no-cache： no-cache表示必須先與服務器確認返回的響應是否發生了變化，而後才能使用該響應來知足後續對同一網址的請求（每次都會根據ETag對服務器發送請求來確認變化，若是未發生變化，瀏覽器不會下載資源）。no-store直接禁止瀏覽器以及全部中間緩存存儲任何版本的返回響應。簡單的說，該策略會禁止任何緩存，每次發送請求時，都會完整地下載服務器的響應。
b、public&private：若是響應被標記爲public，則即便它有關聯的HTTP身份驗證，甚至響應狀態代碼一般沒法緩存，瀏覽器也能夠緩存響應。若是響應被標記爲private，那麼這個響應一般只爲單個用戶緩存，所以不容許任何中間緩存（CDN）對其進行緩存，private通常用在緩存用戶私人信息頁面。
c、max-age： max-age定義了從請求時間開始，緩存的最長時間，單位爲秒。

小結

今天瀏覽器渲染過程和優化方案就介紹到這裏，你們若是有更多更好的頁面性能優化方案能夠多多交流，評論區歡迎留言~~