完整过程
重排会整个过程重新触发，重绘只会触发 合成线程
浏览器渲染原理
渲染时间点
渲染流⽔线
-
解析 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 代码怎么办？
为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS
常⻅问题
-
解析 HTML - Parse HTML
HTML 解析过程中遇到 JS 代码怎么办？
渲染主线程遇到 JS 时必须暂停⼀切⾏为，等待下载执⾏完后才能继续
预解析线程可以分担⼀点下载 JS 的任务
9.png
常⻅问题
-
解析 HTML - Parse HTML
10.png -
样式计算 - Recalculate Style
11.png
Computed Style
-
布局 - Layout
12.png -
布局 - Layout DOM 树 和 Layout 树
DOM 树 和 Layout 树不⼀定是⼀⼀对应的
13.png -
布局 - Layout DOM 树 和 Layout 树
DOM 树 和 Layout 树不⼀定是⼀⼀对应的
14.png -
布局 - Layout DOM 树 和 Layout 树
DOM 树 和 Layout 树不⼀定是⼀⼀对应的
15.png -
分层 - Layer
分层
16.png -
绘制 - Paint
这⾥的绘制，是为每⼀层⽣成如何绘制的指令
17.png -
绘制 - Paint
渲染主线程的⼯作到此为⽌，剩余步骤交给其他线程完成
18.png -
分块 - Tiling
分块会将每⼀层分为多个⼩的区域
19.png -
分块 - Tiling
分块的⼯作是交给多个线程同时进⾏的
20.png -
光栅化 - Raster
光栅化是将每个块变成位图
优先处理靠近视⼝的块
21.png -
光栅化 - Raster
此过程会⽤到 GPU 加速
21.png
-
画 - Draw
合成线程计算出每个位图在屏幕上的位置，交给 GPU 进⾏最终呈现
22.png
完整过程
常⻅⾯试题
什么是 reflow ？
常⻅⾯试题
什么是 repaint ？
常⻅⾯试题
为什么 transform 效率⾼？
