表现：计算Div位置

Question

我在jsperf上设置了测试用例：http://jsperf.com/rect-vs-offsettopmsa

现在很多结果看起来很直观而且很有意义，但是有一件事让我对ScrollTop和OffsetTop感到困扰。

如果它们都是DOM Element属性，为什么ScrollTop比OffsetTop快3-4倍？特别是因为根据msdn：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

，OffsetTop也只是一个只读属性

Answer 1

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

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

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

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

  

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

     

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

     

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

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

更新：

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

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

所以，是的，这两个属性都是readOnly，所以事实上一个比其他属性慢3倍并没有多大意义。忽略我之前写过的内容。