访问布局信息是否也会导致浏览器重排？

Question

我知道设置样式属性会导致浏览器重排。是否有可能在访问布局属性时发生浏览器重排。如果是，请举一个具体的例子，为什么会导致浏览器重排？

Answer 1

当然它取决于实现，但通常浏览器在读取元素的属性时会触发重排，如果它认为需要重新查询布局数据（即一些与布局相关的属性）元素或任何父元素已更改。）

您可以在此处找到WebKit的受影响属性列表：How (not) to trigger a layout in WebKit。 一篇包含示例的更一般的文章：Rendering: repaint, reflow/relayout, restyle

Answer 2

获取属性可能（见下文），但更改属性会。样式相关的属性，例如ele.width。位置属性（例如iframe或img标记的src）将为。

另请注意，附加事件侦听器（on*=...，addEventListener(*,...)等）会导致重排。这是由于事件捕获从最外层的父元素到src元素的方式，并从src元素通过父元素链冒出来。

此外，现代浏览器（例如chrome）会延迟更新GUI，除非查看指定的页面。由于浏览器确保页面正确显示，因此当页面再次变为活动状态时会导致重排。这个延迟/队列可以使得属性看起来好像它们正在引起重排，实际上，浏览器确保它正确显示

Answer 3

如果您没有更改CSS属性，只访问它，则不需要重新呈现该页面。

Answer 4

我知道这是游戏的后期，如果您阅读其他人已经发布的链接，您会找到答案，但是值得在此处明确说明：

浏览器的任务是为您提供当前值，因此作为一般规则，它将重排并重新绘制，以确保您拥有的是正确的值现在即可。我发现以这种方式思考是有帮助的 - 任何时候你要求页面上的任何元素的位置或大小，你可以假设你将导致重排/重绘。不，它不是100％总是如此，但它足够接近100％你应该假设，如果你要求顶部，左边，底部，右边，高度，宽度或任何影响这些测量的东西（比如尺度，旋转）等等），你会引起一个R / R.这就是我能给你的答案。

同样，这在任何时候都不是100％真实，但我发现如果你这样认为它会在98％的时间内帮助它 是真的，并赢了'对其他2％的伤害同样多，因为它有助于98.