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

我已經使用jquery的offset（）。top，但是當它在循環中運行4000次時，瀏覽器會凍結幾秒鐘。有沒有更快的方法來得到這個？使用javascript查找元素位置的最快方法？

這發生在iPAD桌面上更快。

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

來源

2012-08-30 Emre Ekmel

_4000 times_？爲什麼？ – undefined

請發佈更完整的代碼示例。我可能給你的建議可能包括緩存價值，但我不能說只有這一行是否合適。 –

瀏覽器只能逐個執行javascript語句。然後，如果你有一個循環，而瀏覽器正在執行該循環，那麼當時不會執行任何其他操作。所以'Math.round（$（「＃box」）。offset（）。top）'在循環中不會改變，所以你不需要檢查4000次。 – Oriol

.offset().top總是返回一個整數，所以四捨五入是不必要的。此外，你可以緩存jQuery對象的效率：

$box = $('#box'); 
// start your loop here 
    yPos = $box.offset().top; 
// end loop

UPDATE

指定一個類來各路明星，這樣你就不必不斷創建新的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

來源

2012-08-30 21:16:38 Blazemonger

他也可能緩存yPos。我們無法分辨，因爲他發佈了一行代碼。 –

對不起，只發布一行代碼。我使用$（「＃star」+ counter）循環播放星星。在for循環中。盒子是星星的div容器。應該已經更清楚了。 –

你也不能使用jQuery ...

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

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

} 
console.log(top);

jQuery也一點點額外的工作獲得的股利，比純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中引用它們更快。

來源

2012-08-30 21:29:51

您可能還想檢查while循環中的isNaN（element.offsetTop） –

取而代之的是：

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

指定一個類來所有的星星（我們稱之爲類=「星光燦爛」），並做到這一點：

var cacheStars = $(".starry");

這絕不需要更新，除非您添加或刪除星星，在這種情況下，您可以刷新它。然後你的循環變成：

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

來源

2012-08-30 21:39:10

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

回答

相關問題