重绘和回流的区别

1、 重绘:元素样式的改变(但宽高、大小、位置等不变)

如:outline、visibility、color、background-color等

只改变自身样式,不会影响到其他元素

2、 回流:元素的大小或者位置发生改变(当页面布局和几何信息发生改变的时候),触发了重新布局导致渲染树重新计算布局和渲染

​ 如添加或删除可见的DOM元素;元素的位置发生变化;元素的尺寸发生变化、内容发生变化(如文本变化或图片被另一个不同尺寸的图片所代替);页面一开始渲染的时候(无法避免);

​ 因为回流是根据视口大小来计算元素的位置和大小的,所以浏览器窗口尺寸变化也会引起回流

注意:回流一定会触发重绘,而重绘不一定会回流

原创文章 35 获赞 14 访问量 2378

猜你喜欢

转载自blog.csdn.net/pig_is_duck/article/details/105903741