使用javascript查找元素位置的最快方法？

Question

我使用过jquery的offset（）。top，但是当它在循环中运行4000次时，浏览器会冻结几秒钟。 有没有更快的方法来做到这一点？

这是在iPAD上发生的，桌面速度更快。

for (counter=1; counter<4000; counter++)
{
   yPos = Math.round($("#star_"+counter).offset().top);

Answer 1

.offset().top始终返回整数，因此不需要四舍五入。 此外，您可以缓存jQuery对象以提高效率：

$box = $('#box');
// start your loop here
    yPos = $box.offset().top;
// end loop

更新

为每个星星分配一个类，这样就不必继续创建新的jQuery对象：

$('.stars').each(function(i,el) { 
    var yPos = this.offsetTop; 
});

http://api.jquery.com/each

https://developer.mozilla.org/zh-CN/docs/DOM/element.scrollTop

Answer 2

您也不能使用jQuery ...

var element = document.getElementById("box");
var top = element.offsetTop;
while (element.parentNode) {

    element = element.parentNode;
    top += element.offsetTop;

}
console.log(top);

与纯javascript相比，jQuery在获取div方面需要做一些额外的工作。 因此，如果速度是这里的问题，则应使用纯JavaScript。

但是，如果这些是天空中的星星，则可以使用offsetTop并确保它们包含在可填充整个屏幕的div中：

document.getElementById("box").offsetTop;

但我也猜想您要进行某种计算才能将星星放在首位。 您应该创建一个引用div的星星数组。 就像是：

var stars = [];

for (var x = 0; x < 4000; x++) {

    var star = document.createElement("DIV");
    var position = setStarPosition(star);
    stars.push({

        star: star,
        position: position

    });
    document.body.appendChild(star);

}

function setStarPosition(star) {

    // Some positioning code which stores left and top position in variables

    return {

        left: left,
        top: top

    }

}

当您想要操纵星星时，您需要遍历阵列，该阵列具有位置和对div的引用。

在javascript环境（数组中的f.ex.）中引用div比在DOM中引用它们快很多。

Answer 3

代替这个：

for (counter=1; counter<4000; counter++) {
    yPos = Math.round($("#star_"+counter).offset().top);
    // etc
}

为所有星星分配一个类别（我们将其称为class =“ starry”），然后执行以下操作：

var cacheStars = $(".starry");

除非您添加或删除星标，否则永远不需要更新，在这种情况下，您可以刷新它。 然后您的循环变为：

cacheStars.each(function(index, element) {
    ypos = element.offsetTop;
});