位置: IT常识 - 正文
前端面试题 | 什么是回流和重绘？它们的区别是什么？(前端面试题什么是网络协议)
编辑：rootadmin推荐整理分享前端面试题 | 什么是回流和重绘？它们的区别是什么？(前端面试题什么是网络协议)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端面试题必问的题目,前端面试题简书,前端面试题什么是作用域作用域链,前端面试题什么是网络协议,前端面试题什么是网络协议,前端面试题什么是网络协议,前端面试题什么是闭包,前端面试题什么是网络协议,内容如对您有帮助，希望把文章链接给更多的朋友！
1. 解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树进行结合，生成渲染树（render tree）
3.根据生成的渲染树，进行回流（Layout）,得到节点的几何信息（位置，大小）
4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等）
5.Display将像素发送给GPU，展示在页面上。
注意：渲染树只包含可见的节点
这张图和文字可能会更好的理解。图片搬运过来的，侵权删~
回流浏览器会把获取到的HTML代码解析成一个DOM树，html中的每一个元素都是DOM树的一个节点，根节点也就是我们说的document对象。在渲染树中的一部分（或者全部）因为元素的规模尺寸、布局 、显隐等改变而需要重新构建，这就称为回流。每次页面至少会发生一次回流，就是在页面第一次渲染的时候。
何时发生回流? 添加或者删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度等）内容发生变化，文本或者图片被另一个不同尺寸的图片所代替页面开始渲染的时候浏览器的窗口尺寸变化（回流是根据视口的大小来计算元素的位置和大小的） 重绘在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，就称为重绘。
什么时候发生重绘？背景色改变样式发生改变的时候区别回流必定会引起重绘，重绘一定不会引起回流
回流会导致页面重排，影响性能
学到了就点个赞和关注吧~~
