Question

我需要弄清楚列表中哪个元素位于页面顶部。我的解决方案是使用jQuery循环遍历元素并查看位置。

这个功能很好但是当有很多元素时性能会下降。请参阅此小提琴以获得简化示例

这是我注意到的奇怪事情

这是第一次调用position.top（）需要时间
我在chrome（差不多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/>");

Answer 1

好问题，一些想法：

你可能不知道当你做这样的密集工作时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)
```

JQuery position.top（）有很多元素

1 个答案: