Является ли идентификатор селектора быстрее, чем селектор класса, когда он кэшируется в jquery - PullRequest
Новая
       3

Является ли идентификатор селектора быстрее, чем селектор класса, когда он кэшируется в jquery

4 голосов
/ 17 февраля 2011

Я знаю, что ID - более быстрый селектор, чем класс в Javascript. Но что если я кеширую селектор? Когда селектор кэшируется, будет ли он отличаться по скорости, если это селектор класса, или будет так же быстро, как селектор идентификатора?

Пример: 

<div class=”myclass”></div>
<div id=”myid”></div>

var $myclass = $('.myclass');
var $myid = $('#myid');

Будет ли $ myid быстрее, чем $ myclass?

Ответы [ 5 ]

5 голосов
/ 17 февраля 2011

Кэшированная ссылка на DOM node всегда самый быстрый способ.Поэтому, как только вы сохранили ссылку, не имеет значения как она туда попала.

Пример моста

Представьте, что между вашим Javascript есть мостмир и мир DOM .Каждый раз, когда вы хотите получить доступ к элементу («гражданин») из Javascript в мире DOM, вам нужно пересечь этот мост ... но это не бесплатно ... вам нужно заплатить довольно дорогой сбор .
Таким образом, вы должны идти только таким путем один раз и, следовательно, платить только один раз .

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

3 голосов
/ 17 февраля 2011

У вас есть те, которые хранятся в переменных. Так что скорость будет одинаковой для обоих.

Повышение производительности произойдет, когда вы выполняете итерацию DOM для получения элементов. В это время селектор идентификаторов будет быстрее, чем селектор классов.

1 голос
/ 17 февраля 2011

Просто чтобы убедиться, что я не пропускаю отметку ... Я думаю, вы имеете в виду 

<div class="myclass"></div>
<div id="myid"></div>

, а затем в jquery ваши действия: 

var $myclass = $('.myclass');
var $myid = $('#myid');

Мое понимание jqueryв том, что при создании переменных создание $ myclass происходит не так быстро, как создание $ myid ... но когда вы вернетесь к их использованию позже.они будут с одинаковой скоростью.

0 голосов
/ 18 января 2019

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

Думайте о классе как о категории или о классификации для различных элементов, которые имеют общий или общий для них аспект, в то время как идентификатор, напротив, обладает неким уникальным свойством - он единственный в своем роде. Если бы мы имели дело с денежными значениями, есть много отдельных цифр, некоторые промежуточные итоги и только одна общая сумма. Возможно, вы захотите использовать класс .figure для форматирования стиля всех отдельных фигур, класс .subtotal для каждого промежуточного итога, чтобы вы могли по-разному их стилизовать, и вы могли бы присвоить идентификатор итоговому значению, поскольку вы хотите, чтобы он имел уникальный стиль, и будет только один.

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

Итак, это действительно зависит от того, что вы пытаетесь сделать. Если вы хотите найти один и только один элемент, идентификатор будет намного быстрее, но если у всех элементов есть что-то общее, то, безусловно, проще (и, возможно, быстрее) вместо этого ссылаться на них по классам. Мне было бы любопытно увидеть результаты теста, сравнивающие эти ...

Код для обновления всех значений при нажатии кнопки конвертации после ввода коэффициента конверсии: 

$('#convertBtn').on('click', function () {
    var factor = $('#convRatio').val();
    var $err = $('#errorPanel');// only create once to save resources 

    if (factor) {
        // remove any error condition
        if ($err.text()) {
            $err.text("");
        }
        // get an array-like object of all the values
        var $vals = $('#total, .subtotal, .figures');

        $vals.each(function () {
            var $th = $(this);// only create once to save resources
            var val = $th.text();

            $th.text(val * factor);
        });
    } else {
        $err.text("Please enter a conversion rate");
    }
});

Код для выделения только промежуточных итогов при нажатии на один из них: 

var $subs = $('.subtotals');

$subs.on('click', function () {
    var $sub = $(this);// only create once to save resources

    if ($sub.hasClass('hilite')) {
        $sub.addClass('hilite');
    } else {
        $sub.removeClass('hilite');
    }
}

Код для выделения только суммы при нажатии: 

var $tot = $('#total');// only create once to save resources

// toggle highlighting on and off when any subtitle is clicked
$tot.on('click', function () {
    if ($tot.hasClass('hilite')) {
        $tot.addClass('hilite');
    } else {
        $tot.removeClass('hilite');
    }
}
0 голосов
/ 17 февраля 2011

Посмотрите на эти советы

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx?sms_ss=favorites

Выше ссылки предлагают использовать идентификаторы вместо классов, где это возможно

Описание здесь:

jQuery делает выбор элементов DOM с использованием классов так же прост, как и выбор элементов по идентификатору, так что заманчиво использовать классы гораздо более свободно, чем раньше. Тем не менее, все же гораздо лучше выбирать по ID, потому что jQuery использует для этого нативный метод браузера (getElementByID), и ему не нужно выполнять какой-либо собственный обход DOM, что намного быстрее. Насколько быстрее? Давайте узнаем.

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

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('.listItem' + i);
}

Так же, как я думал, что мой браузер завис, он завершил работу за 5066 миллисекунд (более 5 секунд). Поэтому я изменил код, чтобы дать каждому элементу идентификатор вместо класса, а затем выбрал их, используя идентификатор. 

// Create our list
var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
    myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

// Select each item once
for (i = 0; i < 1000; i++) {
    var selectedItem = $('#listItem' + i);
}

На этот раз это заняло всего 61 миллисекунду. Почти в 100 раз быстрее.

...