在JavaScript中获取未样式化元素的高度/宽度的最快方法是什么？

Question

我在测量非临时未样式化元素的高度/宽度时遇到了性能问题。读取以下属性似乎很慢：

.offsetHeight
.clientHeight
.scrollHeight

我在其他地方读到它很慢，因为以某种方式阅读它们会导致重排。至少，这就是我所发现的offsetHeight，但是其他两个的表现相同。这里存在某种量子魔术，因为从逻辑上读取属性不应导致页面重排。无论如何，有没有一种更快的方法可以在最简单的条件下查找元素的宽度/高度，在这种情况下该元素没有像margin, padding, border它那样应用任何样式，或者没有其他样式？

.style.height只是返回空字符串，因为它仅从style=""属性读取值，该属性在明确定义之前为空。

更新：window.getComputedStyle(el).height执行速度一样慢。

Answer 1

如果使用该getBoundingClientRect()方法会怎样：该方法返回元素的大小及其相对于视口的位置。它不会触发回流，因此可以更快，但这完全取决于页面的复杂性和页面上元素的数量。