階段 - Parse

1、解析HTML，瀏覽器將從服務器獲取到的HTML文件之后，會產(chǎn)生一個渲染任務，交給消息隊列（EventLoop/MessageLoop）。
2、在事件循環(huán)機制的作用下，會將渲染任務交給主線程
3、主線程在獲取到渲染任務之后，會先解析HTML文件內(nèi)容，遇到CSS解析CSS文件，遇到script內(nèi)容則會執(zhí)行JS。CSS交給預解析器，預解析器會分擔一點下載JS的任務，JS會阻塞主線程
4、預解析器(線程)會快速瀏覽HTML文件，發(fā)現(xiàn)外部的CSS文件后，會通過網(wǎng)絡線程下載CSS文件，進行初步的解析，再將資源交給渲染主線程，所以CSS渲染不會阻塞渲染主線程
5、預解析器(線程)會快速瀏覽HTML文件，發(fā)現(xiàn)外部的JS文件后，會通過網(wǎng)絡線程下載JS文件，并將資源交給渲染主線程去執(zhí)行JS，在JS執(zhí)行過程中，會阻塞主線程，因為JS代碼可能會改動DOM和CSSOM
6、上述過程后會得到兩棵樹(DOM, CSSOM)

樣式計算 - Computed-style

渲染主線程會遍歷得到的DOM樹，依次為樹中的每個節(jié)點計算出它最終的樣式。
這一過程中，很多預設值會變成絕對值，比如顏色會變成rgb(x,x,x)，em,rem會變成px
完成之后就會得到一顆帶有樣式的DOM樹(renderTree)

布局 - Layout

布局階段會依次遍歷DOM樹的每一個節(jié)點，計算每個節(jié)點的幾何信息，例如節(jié)點的寬度、相對包含塊的位置。
大部分時候，DOM樹和布局不是一一對應的。
比如display: none的節(jié)點沒有幾何信息，不會生成到布局樹；使用了偽元素選擇器，雖然不出現(xiàn)在DOM中，但是擁有幾何信息，會出現(xiàn)在布局樹中。還有匿名行盒、匿名塊盒等。

分層 - Layer

主線程會使用一套復雜的策略對整個布局樹進行分層。
分層的好處，類似于局部刷新，只對有變動的圖層進行修改，從而提升效率
例如：滾動條，堆疊上下文，transform，opacity等樣式都或多或少的影響分層結果，也可以通過will-change屬性更大程度的影響分層結果。可做為性能優(yōu)化

繪制 - Paint

主線程會為每個層單獨產(chǎn)生繪制指令集，用于描述如何將這些層的內(nèi)容畫出來。
完成繪制之后，主線程會將每個圖層的繪制信息提交給合成線程，剩余工作由合成線程完成。

分塊 - Tilinng

合成線程首先會對每個圖層進行分塊，將其劃分為更多的小區(qū)域。
他會從線程池中拿出多個線程來完成分塊工作。

光柵化 - Raster

合成線程會將塊信息提交給GPU進程，并以極快的速度進行光柵化，。
GPU會開啟多個線程進行光柵化，并優(yōu)先處理靠近視口區(qū)域的塊。
光柵化的結果就是一塊一塊的位圖。

畫 - Draw

合成線程拿到每個層、每個塊的位圖后，生成一個個quad(指引)信息
quad會標識出每個塊應該畫在屏幕上的哪個位置，以及會考慮到旋轉(zhuǎn)縮放等變形
變形發(fā)生在合成線程，與渲染主線程無關，這就是transform效率高的原因。
合成線程會把quad提交給GPU進程，由GPU進程產(chǎn)生系統(tǒng)調(diào)用，提交給GPU硬件，完成最終的屏幕成像。

GPU加速

為了提高網(wǎng)頁的渲染性能，現(xiàn)代瀏覽器還支持使用GPU進行渲染加速。GPU渲染可以將渲染樹中的節(jié)點轉(zhuǎn)換為GPU可識別的圖形指令，然后交給GPU進行處理。GPU的并行計算能力可以大幅提高網(wǎng)頁的渲染速度和流暢度。

總的來說，瀏覽器解析HTML到GPU渲染的過程是一個復雜的過程，需要涉及多個階段和技術。對于網(wǎng)頁開發(fā)者來說，理解這些過程能夠幫助他們更好地優(yōu)化網(wǎng)頁性能，提高用戶體驗。

除了以上的技巧和優(yōu)化，還可以考慮使用一些工具來輔助網(wǎng)頁的開發(fā)和優(yōu)化。例如，可以使用Chrome DevTools等開發(fā)工具來分析頁面的性能和優(yōu)化點。此外，還可以使用一些優(yōu)化插件和庫，如Lighthouse等，來自動化一些優(yōu)化工作。

推薦像素的一生