dom回流和重绘（前端面试题 | 什么是回流和重绘？它们的区别是什么？）
在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~
1. 解析获取到的HTML ，生成DOM树 ，解析CSS ，生成CSSOM树
2. 将DOM树和CSSOM树进行结合 ，生成渲染树（render tree）
3.根据生成的渲染树 ，进行回流（Layout）,得到节点的几何信息（位置 ，大小）
4.重绘（Painting）：根据渲染树以及回流得到的几何信息 ，得到节点的绝对像素（像素 ，背景色 ，外观等）
5.Display将像素发送给GPU ，展示在页面上 。
注意：渲染树只包含可见的节点
这张图和文字可能会更好的理解 。图片搬运过来的 ，侵权删~
回流
浏览器会把获取到的HTML代码解析成一个DOM树 ，html中的每一个元素都是DOM树的一个节点 ，根节点也就是我们说的document对象 。在渲染树中的一部分（或者全部）因为元素的规模尺寸 、布局 、显隐等改变而需要重新构建 ，这就称为回流 。每次页面至少会发生一次回流 ，就是在页面第一次渲染的时候 。
何时发生回流?
添加或者删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距 、内边距 、边框大小 、高度和宽度等） 内容发生变化 ，文本或者图片被另一个不同尺寸的图片所代替 页面开始渲染的时候 浏览器的窗口尺寸变化（回流是根据视口的大小来计算元素的位置和大小的）重绘
在渲染树中的一些元素需要更新属性 ，而这些属性只是影响元素的外观 、风格 ，不影响布局 ，就称为重绘 。
什么时候发生重绘？
背景色改变 样式发生改变的时候区别
回流必定会引起重绘 ，重绘一定不会引起回流
回流会导致页面重排 ，影响性能
学到了就点个赞和关注吧~~
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！