JQuery position.top（）慢很多元素

我有一個需要找出列表上的哪個元素是在頁面的頂部。我的解決方案是使用jQuery來遍歷元素並查看位置。JQuery position.top（）慢很多元素

這個功能正常但性能在有很多元素時會降低。看到這個搗鼓一個簡單的例子

這裏是奇怪的事情，我注意到

它是position.top（第一次調用），需要時間
我看到在鉻（差不多3秒）和Firefox（小於1秒）完全不同的行爲

有沒有更好的解決辦法是什麼我想做？

下面是代碼

<p>Log: 
<div id="log"> 
</div> 
</p> 

Items: 
<ul id="items"> 
</ul> 


for (var i = 0; i < 10000; i++) { 
    $("#items").append("<li id='item_" + i + "'>" + i + "</li>"); 
} 

var top = new Date().getTime(); 

$("li[id^='item_']").each(function() { 

    var start = new Date().getTime(); 
    var top = $(this).position().top; 
    var end = new Date().getTime(); 

    var time = end - start; 


    if (time > 1) { 
    $("#log").append($(this).attr('id') + ": " + time + "<br/>"); 
    } 

}); 

var bottom = new Date().getTime(); 

var overalltime = bottom - top; 

$("#log").append("Overall Time: " + overalltime + "<br/>");

來源

2013-09-25 Always Learning

你能告訴我們一點關於這個問題？元素是否移動？他們如何移動？ etc. –

在實際應用中 - 當用戶滾動頁面時，我希望在每個第10個元素到達頁面頂部之後發生一些事情。正如我提到的代碼，我已經工作，它會檢測頁面頂部的項目。但是，如果頁面有成千上萬的元素，檢測功能變得太慢，頁面無響應。 –

爲什麼不使用滾動功能？元素是否相同？ – 2013-09-25 22:14:34

好問題，一些想法：

你可能不知道的jQuery慢多少是當你做一些像這樣的緊張工作，它做了一堆額外的工作，使一切都變得更容易使用。嘗試使用原生JavaScript函數，您一定會注意到性能差異。

// get all <li> elements 
var lis = document.getElementsByTagName('li'); 

// get all class="item" elements 
var items = document.getElementsByClassName('item'); 

// offsetTop is the top position of the element 
items[0].offsetTop;

如果你的元素有多高知識（或約有多高），那麼你可以測量/估計值，而只檢查您需要的元素範圍。例如，如果您知道頁面中只有大約50個元素，請檢查這些元素。
您可以稍後推遲大部分工作，以便瀏覽器只處理可管理的工作量，只需檢查當前屏幕的價值和多一點，這與在您加載更多內容時的想法基本相同擊中Twitter/Google + /等的底部。
確保您只檢查每個第10個元素的高度，如果這是最重要的，則可以在for循環中使用i += 10結束。
```
for (var i = 0; i < 10000; i += 10) 
```

來源

2013-09-25 23:04:18

感謝您的建議。我已經嘗試過使用javascript並循環播放結果。從3秒到2秒的速度似乎更快。也許幾乎不可能瞬間得到這個數據。我推遲了工作，一次加載了一定數量的元素，但隨着頁面的增長，即問題開始時。讓我感到困惑的是爲什麼第一次調用position.top（）需要兩秒鐘，其餘的時間都是<= 1 ms。第一次通話是否會加載dom？ –

我懷疑它與這個有關，頁面正在升溫。 –

JQuery position.top（）慢很多元素

回答

相關問題