Как быстрее пройти элемент DOM?

Допустим, у меня есть такая разметка:

    <div id="comment_box">
        <div class='comment'>
            <ul>
                <li class='comment_1'>
                    </li>
                <li class='comment_2'>
                    </li>
                <li class='comment_3'>
                    </li>
                <li class='comment_4'>
                    </li>
            </ul>
        </div>
    </div>

поле комментария = $('#comment_box')

$('.comment_3', commentBox) или commentBox.find('.comment_3') или любой другой более быстрый способ?


jquery dom performance jquery-selectors dom-traversal
person Vasu Adari    schedule 01.02.2014    source источник
comment
jsperf.com/jquery-find-vs-context-sel   -  person Arun P Johny    schedule 01.02.2014
comment
jsperf.com/jquery-find-vs-context-sel/38   -  person Arun P Johny    schedule 01.02.2014
comment
конец, если вы не используете функцию в цикле из 100 раз, разница очень незначительна... Хотя я предпочитаю .find()   -  person Arun P Johny    schedule 01.02.2014
comment
Уже спрашивали, stackoverflow.com/q/2342282/235710   -  person Mohammad Adil    schedule 01.02.2014

Ответы (3)


arrow_upward
2
arrow_downward

Вот некоторые моменты, которые нам нужно учитывать при выборе элементов с помощью JQuery:

1. Выбор селекторов

Выбор хороших селекторов — один из способов улучшить производительность JavaScript. Небольшая конкретика — например, включение типа элемента при выборе элементов по имени класса — может иметь большое значение. С другой стороны, излишняя конкретика может быть плохой вещью.

Селектор, например

$('#comment_box .comment li.comment_3') перебор,

если селектор, такой как

$('#comment_box li.comment_3') выполнит свою работу.

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

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

2.Сохранение выбранных элементов

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

var commentBox = $('#comment_box');

В приведенном выше примере имя переменной начинается со знака доллара. В отличие от других языков, в JavaScript нет ничего особенного в знаке доллара — это просто еще один символ. Здесь он используется для указания того, что переменная содержит объект jQuery. Эта практика является просто условностью и не является обязательной.

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

При выборе извлекаются только те элементы, которые находятся на странице в момент выбора. Если элементы будут добавлены на страницу позже, вам придется повторить выборку или иным образом добавить их к выборке, сохраненной в переменной. Сохраненные выборки не обновляются волшебным образом при изменении DOM.

Вы можете обратиться к ссылке http://learn.jquery.com/using-jquery-core/selecting-elements/ для более подробной информации

person Mazzu    schedule 01.02.2014
comment
В приведенном выше примере имя переменной начинается со знака доллара. Знак доллара говоришь?? Где??? ;). Хороший ответ, однако. - person Stephen Miller; 12.06.2017

arrow_upward
1
arrow_downward

Ну, есть разные подходы. Лично я бы пошел с этим:

$("#comment_box .comment_3")

person Menixator    schedule 01.02.2014

arrow_upward
-1
arrow_downward

Как правило, чем конкретнее вы говорите, тем лучше. Так, например:

$('#comment_box .comment li.comment_3')
person beautifulcoder    schedule 01.02.2014
comment
Но не будет ли он проходить через каждый селектор? 1. #comment_box 2. .comment 3. li.comment_3, если я не ошибаюсь. - person Vasu Adari; 01.02.2014
comment
На самом деле, jQuery читает селектор справа налево, поэтому обычно это происходит быстрее, чем менее конкретны вы. - person adeneo; 01.02.2014