1

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

这个功能很好，但是当有很多元素时性能会降低。有关简化示例，请参见此小提琴

http://jsfiddle.net/AnfZg/3/

这是我注意到的奇怪的事情

  • 这是第一次调用 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/>");
4

1 回答 1

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 个元素，只需检查这些元素。

  • 您可以将大部分工作推迟到以后，以便浏览器只通过检查当前屏幕的价值和更多的东西来处理可管理的工作量，这与您在推特底部加载更多的想法基本相同/谷歌+/等。

  • 确保你只检查每 10 个元素的高度，如果这很重要，你可以在最后for使用循环来执行此操作i += 10。

    for (var i = 0; i < 10000; i += 10)
于 2013-09-25T23:04:18.213 回答