每次调用 Element.scrollHeight 和 Element.scrollTop

Question

我已经实现了自己的可滚动布局，并且在其中定义了一些字段来存储Element.scrollHeight, Element.scrollTop,Element.scrollWidth并Element.scrollLeft避免可能的重复计算（这似乎是技术术语reflow），因为它们在几种自定义生命周期方法中使用。我想知道这是否是多余的，因为这些属性可能只是定义为 getter 以保护它们不被客户端更改，而 getter 只会从存储实际值的客户端返回不可见字段。

Answer 1

两者兼而有之。

除其他外，这些属性需要布局框是最新的才能返回正确的值，所以是的，它们将触发重排……如果有必要。

如果布局是最新的，浏览器不需要重新计算它，也不会触发重排，他们可以只选择上次布局框计算请求的内部值。

因此，如果在这些调用之间没有任何改变布局，那么多次调用这些不是问题。但是，如果某些东西确实改变了两者之间的布局（如类更改、DOM 节点插入等），则每次调用都可能花费很多，因此请谨慎调用。

---

Ps：关于 getter 的事情，它根本不是要阻止用户设置这些，因为你实际上可以设置这些：

console.log( div.offsetWidth );

Object.defineProperty( div, "offsetWidth", { value: 0 } );

console.log( div.offsetWidth );

<div id="div">hello</div>