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);

jQuery做了一些额外的工作来获得div，而不是纯粹的javascript。因此，如果速度是一个问题，你应该使用纯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;
});

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

3 个答案: