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