重排和重绘

参考：你真的了解回流和重绘吗

简单地总结下两者的概念：

  • 重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
  • 重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

如何减少重排和重绘？

  • 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
  • 批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。
  • 使用 absolute 或 fixed 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。
  • 开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。

BFC

参考：可能是最好的 BFC 解析了…

BFC 即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

创建 BFC 的方式：

  • 绝对定位元素（position 为 absolute 或 fixed ）。
  • 行内块元素，即 display 为 inline-block 。
  • overflow 的值不为 visible 。

BFC 具有一些特性：

  1. 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
  2. 在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的 BFC 可以避免外边距重叠。
  3. 计算 BFC 的高度时，需要计算浮动元素的高度。
  4. BFC 区域不会与浮动的容器发生重叠。
  5. BFC 是独立的容器，容器内部元素不会影响外部元素。
  6. 每个元素的左 margin 值和容器的左 border 相接触。

利用这些特性，我们可以解决以下问题：

  • 利用 4 和 6 ，我们可以实现三栏（或两栏）自适应布局。
  • 利用 2 ，我们可以避免 margin 重叠问题。
  • 利用 3 ，我们可以避免高度塌陷。

传送门