為什么需要明白瀏覽器渲染原理
頁面的設計與實現之后，前端工程師就需要關注性能優化了。其中瀏覽器渲染機制是前端性能優化的關鍵，弄瀏覽器在背后做了什么，才能在明白如何優化。
瀏覽器如何渲染頁面
瀏覽器解析
1、瀏覽器通過請求的 URL 進行域名解析，向服務器發起請求，接收文件（HTML、CSS、JS、Images等等）。
2、HTML 文件加載后，開始構建 DOM Tree
3、CSS 樣式文件加載后，開始解析和構建 CSS Rule Tree
4、Javascript 腳本文件加載后， 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree
瀏覽器渲染
1、瀏覽器引擎通過 DOM Tree 和 CSS Rule Tree 構建 Rendering Tree
2、Rendering Tree 并不與 DOM Tree 對應，比如像 <head> 標簽內容或帶有 display: none; 的元素節點并不包括在 Rendering Tree 中 。
3、通過 CSS Rule Tree 匹配 DOM Tree 進行定位坐標和大小，是否換行，以及 position、overflow、z-index 等等屬性，這個過程稱為 Flow 或 Layout 。
4、最終通過調用Native GUI 的 API 繪制網頁畫面的過程稱為 Paint 。
image.png
