window.pageYOffset 和 document.body.getBoundingClientRect().top 之间的区别？

Question

我正在做一个进度条，具体取决于您滚动的程度。我应该使用这两个中的哪一个？

function getScrollValue() {
    return ((parseInt(document.body.getBoundingClientRect().top) * -1));
}

或者

function getScrollValue() {
    return window.pageYOffset;
}

Answer 1

除了是window.pageYOffset更专业的 API 以及用于检测滚动值的更高效的解决方案之外，getBoundingClientRect().top如果主体有一些偏移其位置的边距顶部，则尝试相同的操作可能会产生意想不到的结果。

编辑

我包含了以下jsPerf 测试，该测试显示了两种替代方案之间的显着性能差异，以及第三种（较旧的）API 的表现如何。