javascript - 使用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/en-US/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 环境中引用 div（f.ex. 在数组中）比在 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;
});