什么是重绘和回流?display:none和visibility:hidden的区别

什么是重绘和回流?

1、什么是重绘?

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘。

2、什么是回流?

回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。

引起回流的因素：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

• DOM节点增加、删除
• DOM节点位置变化
• 元素的尺寸、边距、填充(文字、图片)、边框、宽高
• DOM节点display显示与否，不包含visibility
• 页面渲染初始化(第一次加载页面)
• 浏览器窗口尺寸变化(resize)
• 向浏览器请求某些样式信息(offset、scroll、client、width/height、getComputedStyle、currentStyle)
  除开以上几个因素以外只会引起重绘。

dom操作之所以消耗性能，就是因为容易引起回流，所以在做dom操作优化的时候就是以减少回流次数为依据来进行优化的，之所以需要缓存、文档碎片就是为了减少回流次数。

 <div class="box">我是一个孤独的盒子</div>
   <sc