Javascript 性能：计算Div位置

我在jsperf上设置了测试用例：

现在很多结果看起来很直观，也很有意义，但有一件事让我很困扰，关于ScrollTop和OffsetTop

---

如果它们都是DOM元素属性，为什么ScrollTop比OffsetTop快3-4倍？特别是因为根据msdn，OffsetTop也只是一个只读属性：

我不能确定-您必须检查源代码才能确定。但offsetTop性能较差的明显原因是计算起来更复杂

要计算Element.scrollTop浏览器只需浏览您要求的元素-它可以从中获取所需的所有输入数据

但是要计算Element.offsetTop，您需要计算元素的位置和其父元素的位置，然后比较它们以获得相对位置。因此，需要更多的时间来执行它

您可以找到Element.offsetTop如何根据规范工作的说明

如果元素是HTML主体元素或没有任何关联的CSS布局框，则返回零并终止此算法

如果元素的offsetParent为null，则返回与元素关联的第一个CSS布局框的上边框边缘相对于初始包含块原点的y坐标，忽略应用于元素及其祖先的任何变换，并终止此算法

返回将与元素的offsetParent关联的第一个CSS布局框的顶部填充边的y坐标从与元素关联的第一个CSS布局框的顶部边界边的y坐标减去相对于初始包含块原点的y坐标的结果，忽略应用于元素及其祖先的任何变换

所以，是的，即使它看起来像一个简单的属性，它仍然可以触发对元素的一些计算

更新：

看来我的答案仍然不正确，因为在同一规范中声明了此接口：

partial interface HTMLElement {
  readonly attribute Element? offsetParent;
  readonly attribute long offsetTop;
  readonly attribute long offsetLeft;
  readonly attribute long offsetWidth;
  readonly attribute long offsetHeight;
};

---

所以，是的，这两个属性都是只读的，所以一个比另一个快3倍的事实没有多大意义。忽略我之前写的内容。

它们的测量值不一样：可能是因为

。scrollTop

总是返回

0

，但是

。offsetTop

在测试中总是返回

5000

。因此，访问值为0的变量可能更快？可能，这取决于实现。我的观点是，比较这两种方法是没有意义的。是的，但是

offsetTop

看起来像是一个成员，而不是一个方法。它是

.offsetTop

，而不是

.offsetTop（）

，这意味着在访问该方法时要进行更多的计算。