HTML的內(nèi)容由標(biāo)記和文本組成最域、也稱標(biāo)簽
CSS又稱 層疊樣式表碘举、由選擇器和屬性組成
JS 使頁面內(nèi)容動起來
渲染模塊在執(zhí)行過程中分為很多子階段抵窒、輸入的HTML經(jīng)過這些子階段归薛、輸出像素裳朋、這個處理過程稱為 渲染流水線
-
構(gòu)建DOM樹
瀏覽器無法直接理解和使用html、需要先轉(zhuǎn)化為其能理解的結(jié)構(gòu) - DOM樹
構(gòu)建dom樹的輸入是簡單的html文件窟感、經(jīng)過html解析器解析讨彼、輸出 樹狀結(jié)構(gòu)的DOM
DOM和html的內(nèi)容基本一致、但dom是保存在內(nèi)存中的樹狀就結(jié)構(gòu)柿祈、可以通過JS直接修改
-
樣式計算
是為了計算出DOM節(jié)點中每個元素的具體樣式
將CSS轉(zhuǎn)化為瀏覽器可理解的結(jié)構(gòu) stylesheets
轉(zhuǎn)換樣式表中的屬性值哈误、使其標(biāo)準(zhǔn)化 eg. 2em -> 32px blue -> rgb(0,0,255)
計算出dom樹中每個節(jié)點的具體樣式
-
布局計算
計算dom樹中可見元素的幾何位置
創(chuàng)建布局樹 遍歷dom節(jié)點、將這些節(jié)點加載到布局中
布局計算 將布局運算的結(jié)果寫回布局樹
-
分層
為了更方便的實現(xiàn)3D變換躏嚎、頁面滾動或者使用z-indexing做z軸排序等
渲染引擎還需要為特定的節(jié)點生成專用圖層蜜自、并生成一棵對應(yīng)的圖層樹LayerTree
瀏覽器的頁面其實是很多圖層重荠、這些圖層疊加后合成了最終的頁面
并不是所有的布局樹的每個節(jié)點都包含一個圖層戈鲁、若節(jié)點無對應(yīng)圖層婆殿、則從屬于父節(jié)點的圖層
擁有層疊上下文屬性的元素會被提升為單獨的一層
需要裁剪的地方也會被創(chuàng)建為圖層
-
繪制
圖層的繪制與畫畫的流程基本一致婆芦、會把一個圖層的繪制拆分成很多小的繪制指令肠鲫、然后將指令按照順序組成一個待繪制列表
-
柵格化
繪制列表只是用來記錄繪制順序和繪制指令的列表滩届、而實際上繪制操作是由渲染引擎中的合成線程來完成(圖層繪制列表準(zhǔn)備完成后被啼、主線程會把繪制列表提交給合成線程)
通常泡挺、柵格化過程會使用GPU來加速生成、使用GPU生成位圖的過程叫 快速柵格化寡壮、生成的位圖保存在GPU內(nèi)存中
-
合成
所有圖塊被光柵化之后、合成進程會生成一個繪制圖塊的命令悬蔽、提交給瀏覽器進程
瀏覽器進程的viz組件、接收繪制命令繪制內(nèi)容顯示到瀏覽器
幾個概念
重排: 通過JS或者CS修改元素幾何位置禾乘、eg. 改變元素的寬始藕、高鳄虱、等會觸發(fā)重新布局拙已、解析之后的一系列子階段倍踪、這個過程就叫重排建车、需要更新完整的渲染流水線、開銷很大
重繪: eg. JS更改某些元素的背景色领斥、布局階段不會重新執(zhí)行月洛、直接進入繪制階段嚼黔、然后執(zhí)行之后的子階段、相對重排 少了布局和分層階段碎节、執(zhí)行效率會高一些
直接合成階段: eg. 使用CSS的transform來實現(xiàn)動畫、可以避開重排和重繪階段轴合、直接在非主線程上執(zhí)行合成動畫操作、大大提升繪制效率
