JQuery position.top () медленный с большим количеством элементов

Question

JQuery position.top () медленный с большим количеством элементов

0

Мне нужно выяснить, какой элемент в списке находится в верхней части страницы. Мое решение состоит в том, чтобы использовать jQuery для циклического перемещения элементов и просмотра позиции.

Это прекрасно работает, но производительность ухудшается, когда есть много элементов. См. Эту скрипту для упрощенного примера

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

Вот странные вещи, которые я замечаю

это первый вызов 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/>");

Always Learning 26 сен. 2013, в 00:23

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Daniel Imms · Answer 1 · 2013-09-25T21-04-00.000Z

Хороший вопрос, несколько идей:

Вы, вероятно, не знаете, насколько медленнее 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+/и т.д..
Убедитесь, что вы проверяете только каждую десятую высоту элемента, если это имеет значение, вы можете сделать это в цикле for, используя i += 10 в конце.
```
for (var i = 0; i < 10000; i += 10)
```

Спасибо за предложения. Я попробовал это, используя JavaScript и просматривая результаты. Похоже, что скорость снижается с 3 секунд до чуть более 2. Возможно, это будет невозможно получить почти мгновенно. Я откладываю работу, загружая определенное количество элементов за раз, но по мере роста страницы именно тогда начинаются проблемы. Меня сбивает с толку то, что первый вызов position.top () занимает более двух секунд, а все остальные <= 1 мс. Это первый звонок делает загрузку дом?
Я подозреваю, что это как-то связано с тем, что страница нагревается.