Вопрос по google-maps, jquery, javascript, performance – Javascript - самый быстрый способ показать и скрыть множество элементов списка

5

Когда пользователь перемещается по карте Google, список видимых в данный момент маркеров обновляется. Этот список содержит до 1000 элементов, и он замедляется, когда несколько сотен ли отображаются или скрываются одновременно. Это меньше, чем полсекунды, но это становится раздражающим.

Массив (newLiList) содержит элементы, которые теперь должны быть видны. Другой массив (currentLiList) содержит элементы, которые были ранее видны. Оба массива содержат идентификаторы идентификаторов в качестве индексов.

for (var i in newLiList) {
    if (currentLiList[i] != true) {
        $("ul#theList li#"+i).show();
    }
}
for (var i in currentLiList) {
    if (newLiList[i] != true) {
        $("ul#theList li#"+i).hide();
    }
}

Есть ли более быстрый способ сделать это?

Ваш Ответ

6   ответов
0

Никогда не предполагайте, какая часть кода работает медленно, профилируйте код в FireBug (при условии, что вы используете Firefox) и настройте код, который работает медленнее.

Да. Это был код, который работал медленно. Chris B
5

<li> элементы в массиве напрямую, так что вам не нужно делать сотни поисков CSS-селекторов. Тогда вместо$("ul#theList li#"+i) ты просто делаешьliArray[i].

FYI,"ul#theList li#<i>" эквивалентно просто"#<i>" поскольку идентификаторы элементов (должны быть) уникальны. Вам не нужен дополнительный контекст.

Не совсем верно, что li # id и #id одинаковы. Вы получите тот же объект, но скорость не будет такой же, но она немного зависит от DOM. Но, как правило, если вы пересекаете DOM из смешанных элементов, добавляя li, div или какой тип элемента вы хотите найти, это ускорит поиск на несколько мс.
@Chris B: да, просто #id использует document.getElementById (очень быстро), li # id находит все li, затем фильтрует по атрибуту id.
@googletorp - я имел в виду, что li # id и #id будут возвращать один и тот же объект. И добавив "li" на "# id" не ускорил поиск - он замедлился примерно в 2 раза. Chris B
Я знал, что эти селекторы были эквивалентны, но я не знал, что его упрощение будет иметь такой же большой эффект, как и в 3,5 раза. Тем не менее, сохранение & lt; li & gt; элементы в массиве были еще быстрее (4.5x). Спасибо! Chris B
3

var targetList = $("ul#theList");

и заменить:

$("ul#theList li#"+i).show();

с

$("#"+i, targetList).show();

Это сократит количество случаев, когда jquery вынужден обходить весь DOM.

0

это медленно, потому что вы просите jQuery пересечь DOM несколько сотен раз. Если вместо этого вы создали строку со всеми идентификаторами, разделенными запятыми, вы можете выбрать и скрыть / показать их все в одном действии.

Позвольте мне немного пояснить, что я имел в виду, так как если вы просто выполните $ (string_of_elements), то jQuery будет обходить весь DOM для каждого элемента.

$("ul#theList").find(string_of_elements).show()

Используя этот синтаксис, jQuery сначала найдет элемент ul, а затем должен только пройти его, чтобы найти элемент li s. Теперь, если у вас есть оба списка, преобразованные в строку, вы можете сделать действительно полезные вещи:

$("ul#theList")
    .find(string_of_elements_to_show).show().end()
    .find(string_of_elements_to_hide).hide();

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

Это было довольно медленно - ему все еще нужно пройти через DOM, чтобы найти каждый элемент, даже если все они указаны в одном операторе. Chris B
5

в браузере.

Если весь список не отображать ни одного до изменения элементов списка, браузеру не придется каждый раз пересчитывать поток документа, а затем вы можете установить список обратно в блок.

В качестве альтернативы, если вы не хотите, чтобы мерцание списка исчезло, вы можете клонировать список, скрыть все элементы, которые должны скрыться, а затем заменить старый список новым.

0

пока сбрасываете все элементы списка. Это может предотвратить некоторые перерисовки.

Также рассмотрите возможность использования

$("ul#theList li#"+i).attr("display","none");

$("ul#theList li#"+i).attr("display","block");

а не hide () и show (), поскольку они могут принимать параметр скорости для необычной анимации. Я не знаю, будут ли они медленнее, если вы им не пользуетесь, но это стоит проверить.

Сокрытие списка немного помогло, но изменение jquery на $ (). Css (& quot; display & quot;, & quot; none & quot;); не имело большого значения. Chris B

Похожие вопросы