完整過程
重排會整個過程重新觸發(fā)肄程，重繪只會觸發(fā) 合成線程
瀏覽器渲染原理
渲染時間點
渲染流?線
-
解析 HTML - Parse HTML
4.png
-
解析 HTML - Parse HTML Document Object Model
5.png -
解析 HTML - Parse HTML CSS Object Model
6.png -
解析 HTML - Parse HTML
7.png
HTML 解析過程中遇到 CSS 代碼怎么辦没陡？
為了提?解析效率柔纵，瀏覽器會啟動?個預(yù)解析器率先下載和解析 CSS
常?問題
-
解析 HTML - Parse HTML
HTML 解析過程中遇到 JS 代碼怎么辦锌钮？
渲染主線程遇到 JS 時必須暫停?切?為摔癣，等待下載執(zhí)?完后才能繼續(xù)
預(yù)解析線程可以分擔?點下載 JS 的任務(wù)
9.png
常?問題
-
解析 HTML - Parse HTML
10.png -
樣式計算 - Recalculate Style
11.png
Computed Style
-
布局 - Layout
12.png -
布局 - Layout DOM 樹 和 Layout 樹
DOM 樹 和 Layout 樹不?定是??對應(yīng)的
13.png -
布局 - Layout DOM 樹 和 Layout 樹
DOM 樹 和 Layout 樹不?定是??對應(yīng)的
14.png -
布局 - Layout DOM 樹 和 Layout 樹
DOM 樹 和 Layout 樹不?定是??對應(yīng)的
15.png -
分層 - Layer
分層
16.png -
繪制 - Paint
這?的繪制跛璧，是為每?層?成如何繪制的指令
17.png -
繪制 - Paint
渲染主線程的?作到此為?模叙，剩余步驟交給其他線程完成
18.png -
分塊 - Tiling
分塊會將每?層分為多個?的區(qū)域
19.png -
分塊 - Tiling
分塊的?作是交給多個線程同時進?的
20.png -
光柵化 - Raster
光柵化是將每個塊變成位圖
優(yōu)先處理靠近視?的塊
21.png -
光柵化 - Raster
此過程會?到 GPU 加速
21.png
-
畫 - Draw
合成線程計算出每個位圖在屏幕上的位置歇拆，交給 GPU 進?最終呈現(xiàn)
22.png
完整過程
常??試題
什么是 reflow ？
常??試題
什么是 repaint 范咨？
常??試題
為什么 transform 效率?故觅？
