浏览器渲染原理
渲染时间点
渲染流⽔线
第一步：解析 HTML - Parse HTML
生成文本对象模型（Document Object Model，简称：DOM）
生成CSS对象模型（CSS Object Model，简称CSSOM）
常见问题
HTML 解析过程中遇到 CSS 代码怎么办？
为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS
HTML 解析过程中遇到 JS 代码怎么办？
渲染主线程遇到 JS 时必须暂停⼀切⾏为，等待下载执⾏完后才能继续
预解析线程可以分担⼀点下载 JS 的任务
第二步：样式计算 - Recalculate Style
第三步：布局 - Layout
DOM 树 和 Layout 树
DOM 树 和 Layout 树不⼀定是⼀⼀对应的
第四步：分层 - Layer
第五步：绘制 - Paint
这⾥的绘制，是为每⼀层⽣成如何绘制的指令
渲染主线程的⼯作到此为⽌，剩余步骤交给其他线程完成
第六步：分块 - Tiling
分块会将每⼀层分为多个⼩的区域
分块的⼯作是交给多个线程同时进⾏的
第七步：光栅化 - Raster
光栅化是将每个块变成位图优先处理靠近视⼝的块
此过程会⽤到 GPU 加速
第八步：画 - Draw
合成线程计算出每个位图在屏幕上的位置，交给 GPU 进⾏最终呈现
