重排重绘区别；display:none 和 visibility:hidden 的区别

• 浏览器页面渲染过程：dom 树 --> style 表 --> 创建布局树 --> 分层(对动画) --> 光栅化 --> 合成。
• 重排：
  • 触发条件：当元素的大小或者位置发生了变化 。
  • 步骤：style表 --> 创建布局树 --> 分层(对动画) --> 光栅化 --> 合成
• 重绘：
  • 触发条件：当元素的外观发生变化，会跳过创建布局树和分层。
  • 步骤：stlye 表 --> 光栅化 --> 合成

display:none； 会移除布局中该元素，导致重排

visibility:hidden； 隐藏该元素，还在布局中，只触发重绘。

vue-if 和 vue-show 的区别_日晞的博客-CSDN博客