JQuery position.top（）速度慢，有很多元素_Jquery

JQuery position.top（）速度慢，有很多元素

jquery

JQuery position.top（）速度慢，有很多元素,jquery,Jquery,我需要找出列表中哪个元素位于页面顶部。我的解决方案是使用jQuery遍历元素并查看位置这项功能很好，但当有很多元素时，性能会下降。请参阅此小提琴以获取简化示例以下是我注意到的一些奇怪的事情这是对position.top（）的第一次调用，需要花费时间我在chrome（近3秒）和firefox（不到1秒）中看到了截然不同的行为对于我正在尝试做的事情，有更好的解决方案吗这是密码 <p>Log: <div id="log"> </div> </

我需要找出列表中哪个元素位于页面顶部。我的解决方案是使用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/>");

日志：

项目：


对于（变量i=0；i<10000；i++）{
$（“#项”）。追加（“1）{
$（“#log”）.append（$（this.attr（'id'）+”：“+time+”
）；
}
});
var bottom=new Date（）.getTime（）；
var总时间=底部-顶部；
$（“#log”）.append（“总时间：+overalltime+”
）；

好问题，一些想法：

您可能不知道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;

// 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;