【前端学习 - CSS(20)回流(重排)和重绘】

1. 回流(重排)和重绘区别?

回流(重排),reflow:当 render tree 中的一部分(或全部)因为元素的规模尺寸布局隐藏等改变时而需要重新构建;

重绘(repaint):当 render tree 中的一些元素需要更新属性,而这些属性只影响元素的外观风格,而不会影响布局时,称其为重绘,例如颜色改变等。

注意:每个页面至少需要引发一次重排+重绘,而且重排(回流)一定会引发重绘

触发重排(回流)的条件:

  • 增加或者删除可见的 dom 元素;
  • 元素的位置发生了改变;
  • 元素的尺寸发生了改变,例如边距,宽高等几何属性改变;
  • 内容改变,例如图片大小,字体大小改变等;
  • 页面渲染初始化;
  • 浏览器窗口尺寸改变,例如 resize 事件发生时等;

技巧:回流理解为流动,流动自然会引起布局的变动;重绘可以理解为表层绘画,那么只是外观的改变。


 

猜你喜欢

转载自blog.csdn.net/weixin_60364883/article/details/123055310