0

我在 SO和其他地方读过，重新绘制和重新流动对于浏览器执行来说是昂贵的。

我很好奇 CSS/JS 替代 re-paint/display:none和 re-flow/visibility:hidden对浏览器的计算要求不高。

为了清楚起见，如果我错了，请纠正我，一个常见的回流场景是当您设置display:none要切换显示的元素时，例如下拉菜单。重排意味着浏览器首先“流动”，即显示，元素和下面的所有内容作为可见内容，但随后必须重新流动所有内容，因为需要隐藏下拉菜单。

关于回流和重绘的性能冲击是否真的是人们需要关心的事情，也欢迎评论。

4

2 回答 2

2

我认为您误解了该声明。

如果您正在动态生成元素，请考虑以下两个场景：

  1. 生成一个元素，将其添加到 DOM。重复。
  2. 首先创建一个 DOMDocumentFragment。将元素添加到片段。重复。将片段添加到 DOM。

方法 1 将为您添加的每个元素重新绘制。方法 2 最后只会进行一次重绘。如果要添加的元素数量很少，方法 1 可能很好。如果要添加许多节点，方法 2 会快得多。

这就是重绘很贵的意思。

也许这是一种看待它的好方法：

重新绘制的基本成本为 100。创建一个 DOM 元素并附加它的成本为 1。如果您为 7 个元素执行方法 1，您的成本将为 (1 + 100) * 7 = 707。如果您是执行方法 2 您的成本将是：1 * 7 + 100 = 107。这要低得多。这些数字仅用于说明。它可能比这更多，但我认为这是查看重绘性能的一种很好且简单的方法。

于 2013-03-04T16:10:47.723 回答
1

没有简单的公式。首先，每个浏览器都有自己的方式来处理重排和重绘。通常，浏览器会尽量推迟重排，因为您知道，它们可能非常昂贵。

一般来说，请记住以下操作总是会触发重排：

  • 通过添加、删除或移动节点来更改 DOM 树。
  • 更改 CSS 计算属性，例如offsetWidth
  • getComputedStyle使用（或currentStyle在旧 IE 上）读取计算的 CSS 值

（请参阅DOM 环境中何时发生回流？。）

设置样式通常会导致重排，但如果更改不会影响其他元素的位置或尺寸，浏览器会尽量避免它[需要引用]。

有关回流的一些乐趣，请参阅它会回流吗？

于 2013-03-04T17:44:36.380 回答