使用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;
});