Element.scrollHeight和Element.scroll Top每次被调用时都会计算返回值吗

Question

我实现了自己的可滚动布局，并在其中定义了一些字段来存储Element.scrollHeight、Element.scrollTop、Element.scrollWidth和Element.scrollLeft，以避免可能的重复计算(这方面的技术术语似乎是reflow(，因为它们在几个自定义生命周期方法中使用。

我想知道这是否是多余的，因为这些属性可能只是被定义为getter，以保护它们不被客户端更改，而getter只会从存储实际值的客户端返回不可见的字段。

Answer 1

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

我不知道这个来源是否可靠，但它说是的，它们会触发回流。

Answer 2

两者兼而有之。

这些属性需要布局框是最新的才能返回正确的值，所以是的，它们会触发回流。。。如有必要。

如果布局是最新的，浏览器不需要重新计算，也不会触发回流，他们只需要从上次布局框计算中选择所需的内部值。

因此，如果在这些调用之间没有任何内容更改布局，那么多次调用这些调用就不是问题。但是，如果其间确实发生了布局更改(如类更改、DOM节点插入等(，则每次调用可能会花费大量成本，因此请谨慎调用。

---

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

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

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