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.scrollトップ

Answer 2

これの代わりに：

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

Answer 3

jQueryも使えません...

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

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

}
console.log(top);

jQuery は、純粋な JavaScript よりも、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 内でそれらを参照するよりもはるかに高速です。