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

我使用了jquery的offset（）.top，但在循环中运行它4000次时，浏览器会冻结几秒钟。有没有更快的办法

这种情况发生在iPAD上，台式机速度更快

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

for（counter=1；counter
.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; 
});


您也不能使用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时需要做一些额外的工作

但如果这些是天空中的星星，你可以使用Offsetop，并确保它们包含在一个填充整个屏幕的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

    }

}

var-stars=[]；
对于（变量x=0；x<4000；x++）{
var star=document.createElement（“DIV”）；
var位置=设置star位置（星形）；
推({
星：星，
职位：职位
});
document.body.appendChild（星号）；
}
功能设置tarposition（星形）{
//在变量中存储左位置和顶部位置的一些定位代码
返回{
左:左,，
顶端：顶端
}
}

当你想要操纵星星时，你要通过数组，数组中有位置和对div的引用

在javascript环境中引用div（数组中的f.ex.）比在DOM中引用div快得多。
而不是：

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

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

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

4000次？为什么？请发布一个更完整的代码示例。我可能会给你一些建议，包括缓存值，但我不知道这是否适用于这一行。浏览器只能逐个执行javascript语句。然后，如果你有一个循环，当浏览器执行该循环时，它不会执行其他任何操作e、 所以
Math.round（$（“#box”）.offset（）.top）
在循环过程中不会改变，因此您无需检查4000次。这是一个充满星星的天空动画。星星数当前设置为4000，但可能会更多。每个星星的位置在0到5之间随机递增，以提供深度感。您不会创建具有相同id的多个元素
框
，是吗？他可能也会缓存YPO。我们不知道，因为他只发布了一行代码。很抱歉，只发布了一行代码。我使用$（“#star”+计数器）在星星之间循环。在for循环中。该框是星星的div容器。应该更清楚。您可能还需要检查isNaN（element.offsetop）在while循环中
cacheStars.each(function(index, element) {
    ypos = element.offsetTop;
});