目前，比较常见的浏览器内核（渲染引擎）有： WebKit 、 Blink 、 Gecko 、 Trident 、 EdgeHTML ，更多 请看 。
以下是两个主流浏览器内核 WebKit、Gecko 合成 DOM 的过程：
两者整体流程基本相似，在术语方面也有所不同，比如 WebKit 中的 Layout 过程，Gecko 称为 Reflow 。
比如，React Hooks 中处理副作用时，某些场景下应选择 useLayoutEffect ，而不是 useEffect 的原因正是为了减少回流重绘的过程。
「回流」也有称作「重排」的。
在很长一段时间里，显示器的刷新率多数为 60Hz，即使到现在仍然是占多数。
刷新率（RefreshRate），表示单位时间内能够绘制新图像的次数。举个例子，60Hz 的刷新率，表示显示器要在一秒内刷新 60 次图像，换句话说，一次图像的更新要在 16.67ms 内完成。这样才不会造成卡顿。如果超出这个时间，在视角上就会产生卡顿感。
附一个来自网上的图：
还是用 React 举例吧。我们知道 React 16 起采用了全新的 Fiber 架构，就是为了解决大型应用卡顿的问题。
我们知道，浏览器是多进程的，JavaScript 是单线程的。浏览器会为每个标签（Tab）分配一个进程，每个进程由 GUI 渲染线程、JS 线程、定时器线程、网络线程、事件线程多个线程组成。最重要的一点是： GUI 渲染线程与 JS 线程是互斥的 。换句话说，某个时刻它只能执行其中一个线程，等待该线程执行完毕之后，才将执行权交由另一个线程。
那么为什么 React 15 在处理大型应用的时候会卡顿呢？
首先 React 15 架构，由 协调器 （Reconciler）和 渲染器 （Render）组成。而 React 16 在原来的基础上新增了 调度器 （Scheduler），用于调度任务的优先级。
在 React 15 的 Reconciler 中，组件的挂载（Mounting）、更新（Updating）会对应调用 mountComponent 、 updateComponent 方法，它们内部会执行递归操作，以更新子组件。 但是递归执行的缺点是「无法中断」。 假设 JS 线程执行递归耗时超过了 16.67ms ，由于互斥期间 GUI 线程并不能执行任何的操作，等递归完并生成新的虚拟 DOM 之后，触发 DOM 等更新，此时由 GUI 线程进行处理，可能包括回流、重绘的过程，然后才完成一次页面的更新。由于无法满足刷新率的要求，就会产生卡顿感。
在 React 16 新增的 Scheduler 可以使得浏览器有剩余时间的时候通知 React，而且提供了多种调度优先级，使得更高优先级的任务优先进入 Reconciler 阶段。 而 Reconciler 则是利用了 Fiber 这种架构实现了 「可中断的异步更新」 （请注意，这里的异步并不是由 setTimeout 实现的，由于精度问题， setTimeout 实际上最低延迟时间是 4ms ，在这寸土寸金的一帧时间才 16.67ms ，显然是不合理的）。
因此，React 就是采用了这种思路来解决大型应用卡顿问题的。
题外话扯完了，回到本文的主题...
再附上一张源自网上的图：
这几个关键点：
哪些 CSS 属性影响 Layout，哪些影响 Paint 呢？
可以看这个网站 CSS Triggers 。
其中 Change from default 表示从未设置（即 CSS 默认值）到设置为其他值， Subsequent updates 表示属性修改。
第 1 选择器
第 2 RGBA和透明度
第 3 多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音
1、CSS3圆角表格圆角表格，对应属性：border-radius。
2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。
4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。
边框（Borders）
border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果；
border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象；
border-radius:能产生类似圆角矩形的效果。
背景（Backgrounds）
background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content。
border:控制背景起始于左上角的边框；
padding:控制背景起始于左上角的留白；
content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding。
border:会覆盖住背景；
padding:不会覆盖背景；
background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。
multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。
文字效果（Text effects）
text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。
text -overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。
颜色（Color）
HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）
HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）
opacity:直接控制不透明度，用0到1之间的数来表示。
实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。
经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。
用户界面（User-interface）
resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。
选择器（Selectors）
CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。
其它模块：
（Other modules）
media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。
multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值。
column-width:指定每列宽度
column-count:指定列数
column-gap:指定每列之间的间距
column-rule-color:控制列间的颜色
column-rule-style:控制列间的样式
column-rule-width:控制列间的宽度
column-space-distribution:平均分配列间距。
