jQuery скорость: какая из них быстрее, {ul # parent li} или {li.child}?

Question

Просто любопытно, существует ли установленный «лучший способ» нацеливать дочерние элементы внутри родительского элемента.

Например, если я хочу создать событие click для дочерних элементов родительского элемента, какое из них должно быть предпочтительным?

а) дать родительский элемент и идентификатор и сделать:

$('ul#parent li').click(function() {});

b) или, вместо этого, присвойте каждому из детей имя класса и укажите его цель:

$('li.child').click(function() {});

Я спрашиваю, потому что я пытаюсь выжать каждый бит производительности, который я могу получить в довольно большом приложении. Логика подсказывает, что нацеливание на идентификатор выполняется быстрее, чем на имя класса, но сводит ли родительская> дочерняя структура это преимущество на нет и оправдывает нацеливание вместо имени класса?

Спасибо за понимание.

Answer 1

Это будет самый быстрый вариант:

$('ul#parent li').click(function() {});

Всегда спускаться от селектора идентификаторов, если это возможно.

Однако, если у вас есть лот из <li> элементов, дешевле использовать .delegate(), например:

$('#parent').delegate('li', 'click', function() { });

с .delegate() вы присоединяете один обработчик событий вместо n (количество <li>) обработчиков событий, по одному для каждого <li>.Он работает, слушая, как click всплывает до <ul>, если время запуска убивает вас, это гораздо лучший вариант.Это компромисс времени запуска, связывающий множество обработчиков и стоимость пузыря (что очень, очень , очень небольшая стоимость).Если у вас много элементов, это почти всегда лучший вариант.

Answer 2

Хотя теоретически $('ul#parent li') быстрее, чем $('li.child'), практически нет особых различий.

В микробенчмарке (http://jsbin.com/uwela/4) есть 1 <ul id="parent"> с 4096 <li class="child"> и 64 <ul> с 64 <li>. На Firefox 3.6 на моей машине все $('ul#parent li'), $('#parent li'), $('li.child'), $('.child') занимает примерно 210 миллисекунд для добавления функций onclick.

Но тогда DOM на этой тестовой странице очень поверхностный. Проверьте это на своей странице, чтобы убедиться.

Answer 3

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

$ul_parent.children('li');

или

$('>li', $ul_parent); //same as above

Это позволяет вам использовать быстрый селектор и сокращает некоторые накладные расходы для последующего выбора.Вторая форма используется не очень часто, но второй параметр действует как контекст для селектора в первом параметре, поэтому функции jQuery не нужно искать всю страницу.Он просто ищет уже созданный объект-оболочку jQ.

Answer 4

Селектор с id работает быстрее, потому что идентификатор должен быть один раз на элемент на странице, а не класс, который может быть назначен нескольким элементам с одинаковым именем класса.