Подтвердить что ты не робот

В jQuery выбирается по классу или идентификатору быстрее, чем выбор другим атрибутом?

В принципе,

$("#someid")

или

$(".someclass")

быстрее, чем

$("[someattr='value']")

Я бы предположил, что это (то есть выбор по id быстрее, затем класс, затем атрибут), но кто-нибудь знает наверняка?

4b9b3361

ОТВЕТЫ

Ответ 1

Идентификатор абсолютно быстрый. Одна из причин заключается в том, что идентификатор должен быть уникальным, поэтому API прекращает поиск после того, как идентификатор найден в DOM.

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

Например...

$(".someclass", "#somecontainer")

Где somecontainer - это что-то вроде div, окружающего элемент с классом someclass. Это может обеспечить огромное преимущество в производительности в случаях, когда somecontainer содержит небольшую часть DOM.

UPDATE:

Несколько лет назад я провел несколько тестов вокруг параметра контекста. Прочитав комментарии ниже, мне было любопытно, если что-то изменилось. Действительно, кажется, что сцена несколько изменилась с сегодняшними браузерами. Может быть, это также связано с улучшениями в jQuery? Я не знаю.

Вот мои результаты с 10 000 итераций (код ниже):

IE9

$(".someclass") - 2793 мс

$(".someclass", "#somecontainer") - 1481 мс

Chrome 12

$(".someclass") - 75 мс

$(".someclass", "#somecontainer") - 104 мс

Firefox 3.6

$(".someclass") - 308 мс

$(".someclass", "#somecontainer") - 357 мс

Таким образом, среди этих больших 3 современных браузеров параметр контекста, похоже, помогает IE9. Старые браузеры также получат выгоду от параметра контекста. Но, учитывая преобладание каждого из этих браузеров и усреднение всего, чистая прибыль сейчас немного стирается.

И вот код, если кто-то захочет попробовать его сами...

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                startTime = new Date().getTime();               
                for (i = 0; i < 10000; i++)
                {
                    s = $(".someclass");
                }           
                $("#withoutcontext").html(elapsedMilliseconds(startTime));


                startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $(".someclass", "#somecontainer");
                }           
                $("#withcontext").html(elapsedMilliseconds(startTime));

            });

            function elapsedMilliseconds(startTime)
            {
                var n = new Date();
                var s = n.getTime();
                var diff = s - startTime;
                return diff;
            }
        </script>
    </head>
    <body>
        <h1>jQuery Selector Performance: Context vs No Context</h1>

        <h2>$(".someclass")</h2>
        <span id="withoutcontext">---</span> ms<br /><br />

        <h2>$(".someclass", "#somecontainer")</h2>
        <span id="withcontext">---</span> ms<br /><br />

        <hr />

        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <div id="somecontainer">
            <p class="a">a</p>
            <p class="b">b</p>
            <p class="c">c</p>
            <p class="someclass">someclass</p>
        </div>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
    </body>
</html>

Ответ 2

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

Если вам нужно выбрать класс или атрибут, попробуйте включить поиск в ID. напр.

$("#someid .someclass")

Ответ 3

Идентификаторы идентификаторов и классов, по крайней мере, когда они используются сами по себе, имеют тенденцию быть более быстрыми, будь то для jQuery или для CSS. Это связано в основном с тем, что браузеры оптимизировали алгоритмы для идентификаторов и классов в своих механизмах DOM/CSS.

В современных браузерах с последними версиями jQuery любые селекторные строки, которые браузер понимает как поддерживаемые CSS-селектора, будут обрабатываться document.querySelectorAll(), предлагая максимальную производительность при условии использования стандартных селекторов CSS. Нестандартные селектора или старые браузеры позаботятся jQuery и/или библиотекой Sizzle, которые делают все возможное, чтобы использовать методы get-element (s) DOM для прохождения DOM.

Самое главное помнить, что производительность зависит от браузера (версии) и браузера (версии) из-за различных реализаций DOM. По крайней мере, так, как я считаю.

Ответ 4

Идентификатор уникален, и если вы хотите только выбрать один/первый элемент, эквивалентный

$( "# someid" ) = > 75,695 оп/сек, самый быстрый

$(. unique_class ') = > 45,257 ops/sec, на 40% медленнее: только один класс на странице

$( ". someclass" ). first() = > 42,217 ops/sec, на 46% медленнее: несколько классов на странице, выберите первый элемент

$( ". someclass: eq (0)" ) = > 18,324 ops/sec, 76% медленнее: несколько классов на странице, выберите элемент в выбранном индексе

Тестовый URL: http://jsperf.com/jquery-selector-speed-tests/98

Ответ 5

Идентификатор всегда будет самым быстрым, так как он уникален на странице. Класс "может" быстрее, чем атрибут, но он зависит.

Настоящий кикер здесь - это выбор класса внутри, а идентификатор НЕ может быть быстрее, чем просто выбор класса. Это будет зависеть от страницы и браузера. В моем тестировании выбор сложной страницы с ограниченным числом элементов с "классом", где родительский элемент класса имеет идентификатор, например:

<div id='iamout'>
  <div class='aonther'>
    <div class='iamin'>stuff</div>
    <div class='iamin'>stuff</div>
  </div>
</div>

селектор, такой как $('.iamin','#iamout'), не всегда был таким быстрым, как $('.iamin')

Не все браузеры поддерживают select по имени класса (изначально), но современные/более новые, и, следовательно, могут предложить лучшую производительность в зависимости от того, какой браузер у вас есть.

Если вам нужна оптимальная производительность, вам нужно будет проверить свою точную страницу.

Ответ 6

Id быстрее, потому что это единственный элемент, который может иметь этот идентификатор. Многие объекты могут иметь одно и то же имя класса. Кто-то может это проверить, но, похоже, что этот документ не нужно будет проходить после того, как будет найден идентификатор. Для классов это может быть не так? НТН