HTML 、 CSS 、 JavaScript 数据，经过浏览器中间渲染模块的处理，再加上 重排 、 重绘 、 合成 的一个个环节，才最终输出为屏幕上的 像素 视图画面。本文就逐一介绍 重排 、 重绘 、 合成 的基本概念、触发时机、影响范围以及其优化策略。
一个完整的渲染流程一般都经历如下过程：
定义： 当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫 重排 。无疑， 重排需要更新完整的渲染流水线，所以开销也是最大的。
触发时机和影响范围： DOM节点信息更改,触发重排时，这个DOM更改程度会决定周边DOM更改范围。
全局范围： 就是从根节点html开始对整个渲染树进行重新布局，例如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等。
局部范围： 对渲染树的某部分或某一个渲染对象进行重新布局。
定义： 如果修改了元素的背景颜色，并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫 重绘 。 相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
触发时机和影响范围： 每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。
定义： 合成是一种将页面的各个部分分离成层（Layer Tree），分别将它们栅格化，然后在称为“合成线程”的中组合为页面的技术。
触发时机和影响范围： 在GUI渲染线程后执行，将GUI渲染线程生成的绘制列表转换为位图,然后发送绘制图块命令 DrawQuad 给浏览器进程，浏览器进程根据 DrawQuad 消息生成页面，将页面显示到显示器上
优点： 我们使用了 CSS 的 transform 来实现动画效果，避开了 重排 和 重绘 阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。
重排 一定会引起 重绘 ，而 重绘 不一定会引起 重排 ， 重绘 的开销较小， 重排 的代价较高。在日常开发过程中应该尽量减少 重排 和 重绘 操作。
欢迎访问： 天问博客
写css最逃不开的应该是浏览器兼容问题了吧，因为css存在一些 未定义行为 ，各个浏览器都会按照自己的渲染规则来表现，就会存在表现不一致的情况，还有很多属性某些浏览器不支持，很多时候需要我们用更通用的方法来实现一些UI效果。本文重点来说说浏览器是如何把一个页面渲染出来的。
主要流程：
DOM生成、样式计算、布局、分层、图层绘制、栅格化、合成显示
下面主要讲css相关的几个步骤
我们书写的html最终都会被解析成一颗dom树，它来表达的dom结构能被浏览器所理解，那css做的就是赋予dom节点每个元素样式。当然，我们写的css也是不能直接被浏览器理解的，需要转化成styleSheets，我们在浏览器控制台输入document.styleSheets就能看到。
styleSheets要应用到各个元素上还需要两个步骤：
最后得出dom节点每个元素的具体样式。
得到dom树后，浏览器会遍历这棵树，把所有可见的节点加到布局树中，再进行布局计算，得到每个节点的坐标位置，保存在布局树中。
得到每个元素的具体位置后，还不能开始绘制页面，因为我们的页面并不是二维的，3D变换，z轴排序、页面滚动等效果都需要图层来实现。所以浏览器会为特定的节点生成专门的图层便于这些效果的实现。那什么样的节点会创建专门的图层呢，包括拥有层叠上下文属性的元素以及需要剪裁(clip)的地方，可以看一下 css（五）层叠
在浏览器开发者工具会有一个Layers标签，这里面可以直观地看到页面的分层情况
当改变了元素宽高或者几何位置的时候，就会触发 重排 ，需要走一遍完整的渲染过程，开销最大。
如果只是改变颜色，那么布局阶段就不需要执行，可以直接进入绘制阶段，所以叫 重绘 ，省去了布局和分层，效率会比重排要高一些。
而使用css的transform实现动画效果，则可以避开重绘和重排，只进行后续的合成操作，被称为 合成 ，能大大提升绘制效率。
Ps 合成操作实在非主线程(GPU进程)上执行的，不占用主线程资源
前端web页面的渲染流程
1、构建DOM与 CSSOM
浏览器通过http请求，获得静态资源后，进行页面渲染时，构建dom与cssom是同时进行的。
html 构建dom
构建dom时，按照html页面中标签的顺序，由上向下渲染。
css 构建cssom
html构建cssom的同时，将css样式构建为cssom
2、渲染树 Render Tree
该过程中DOM与CSSOM合并，生成渲染树，树中包含了渲染页面所需要的节点。
3、布局Layout
计算出每个节点对象的精确位置和大小
4、绘制Paint
使用上面准备好的节点信息，绘制出页面
javascript
我们看到，在构建DOM和CSSOM阶段，会有javascript进入
1、当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
2、JavaScript 可以查询和修改 DOM 与 CSSOM。
3、JavaScript 执行将暂停，直至 CSSOM 就绪。
————————————————
原文链接： https://blog.csdn.net/baidu_30891377/article/details/106313534
