浏览器的渲染原理？

渲染就是经过一系列复杂的加载把代码变成网页格式，从输入url摁下到渲染页面重点就俩块

一块：网络：拿到HTML

一块：渲染（render）：渲染

网络进程拿到HTML之后会包装成任务，并将其传递给渲染主线程的消息队列，在事件循环机制的作用下，渲染主线程取出渲染任务开始渲染流程

渲染流程

整个渲染流程分为多个阶段，分别是：解析HTML，样式计算，布局，分层，绘制，分块，光栅化，画

每个阶段都有明确的输入输出，上一个阶段的输出会成为下一阶段的输入，这样整个渲染流程就形成了一套严密的生产流水线

解析 HTML ---- Parse HTML

parse HTML 会产生两个可以操作的对象结构，分别是 DOM 树 和 CSSOM 树

解析过程中，为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，预解析器，来率先下载 HTML 中的 css 文件，和 js 文件

如果主线程解析到 link 位置，此时外部的 css 文件 还没下载好，主线程不会等待，会继续解析后续的 HTML

如果主线程解析到 script 位置，会停止解析 HTML 等待 js 文件下载好，并将全局的代码解析执行完成之后，才继续解析 HTML，因为 js 代码执行过程中可能会修改当前的 dom 树，所以 dom 树的生成必须暂停

完成之后，得到完整的 DOM 和 CSSOM

样式计算--Computed Style：

计算出每个 DOM 节点的最终样式，结合。Computed Style

在这一过程中，很多预设值会变成绝对值，比如red会变成red（255，0，0），相对单位会变成绝对单位，比如 em 变成 px，这一步完成之后会得到一棵带有样式的 DOM 树

布局--Layout：

布局完成后会得到布局树 Layout 树

布局会依次遍历 DOM 树上的每一个节点，计算每个节点的几何信息，比如节点的宽高，相对包含块的位置

大部分的时候 DOM 树和布局树并非 一 一对应，比如 display：none 的节点几乎没有几何信息，因此他不会生成布局树，比如伪元素，虽然 DOM 树中不存在这些伪元素节点但他们拥有几何信息

分层-Layer：

主线程会使用一套复杂的策略对整个布局树中进行分层

分层的好处：对将来的某一个层改变后，仅会对该层进行后续的处理，提升效率

滚动条，堆叠上下文，teansform，等样式都会影响分层结果

绘制-paint：

主线层会为每个单独产生绘制令集，用于描述这一层的内容该如何画出来

分块-Tiling：

完成绘制后，主线程将每个土城的绘制信息提交给合成线程，剩余的工作将由合成线程完成，合成线程首先对每个图层进行分块，将其划分为更多的小区域，他会从线程池中拿去多个线程来完成分块工作

光栅化-Raster：

光栅化就是将每个块变成位图，优先处理靠近视口的块

合成线程会将块信息交给 CPU 进程，以极高的速度完成光栅化， CPU 进程会开启多过分线程来完成，并优先处理靠近视口区的块

画-draw：

合层线程拿到每个层，每个块的位图后，生成一个个【指引 quad】信息

指引会标识出每个图应该画到屏幕的哪个位置，会考虑旋转，缩放等变形，变形发生在合成线程，与渲染线程无关

合成线程会把 quad 提交给 cpu 进程，由 cpu 进程产生系统调用，提交给 cpu 硬件，完成最终的屏幕成像

面试题：什么是reflow？

当我们修改操作影响到几何信息，修改到布局的时候，浏览器需要从新排版，这个过程叫reflow

reflow，本质就是重新计算 布局树 Layout

为了避免连续多次操作导致布局反复计算，浏览器会合并这些操作，当js代码全部完成后再进行统一计算，所以改动属性造成的 reflow 是异步的

什么是 repaint ？

是重新根据分层信息计算了绘制指令，当改变了可见样式之后，就需要重新计算，引发 repaint 由于元素布局也属于可见样式所以 reflow 一定会引发 repaint

为什么 transform效率更高？

因为 transform 既不会影响布局，也不会影响绘制指令，它影响的只是最后一个 draw 阶段

draw 阶段在合成线程中，所以transform 的变化不会影响到渲染主线程