Хорошие способы улучшить производительность селектора jQuery?

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

$(".myclass", a_DOM_element);

должно быть быстрее, чем

$(".myclass");

Если у вас уже есть a_DOM_element и он значительно меньше, чем весь документ.

как Рид заявил выше jQuery работает снизу вверх. Хотя

что означает $('#foo bar div') - Это намного медленнее, чем $('bar div #foo')

дело не в этом. Если бы вы имели #foo вы бы ничего не поставили перед ним в селекторе в любом случае, так как идентификаторы должны быть уникальными.

суть:

• если вы выделяете что-либо из элемента с идентификатором, то сначала выберите later, а затем используйте .find,.children так далее.:$('#foo').find('div')
• ваша самая левая (первая) часть селектора можете менее эффективное масштабирование до самой правой (последней) части, которая должны быть наиболее эффективным-это означает, что если у вас нет идентификатора убедитесь, что вы ищете $('div.common[slow*=Search] input.rare'), а не $('div.rare input.common[name*=slowSearch]') - поскольку это не всегда применимо, убедитесь, что сила селектор для разделения соответственно.

чтобы полностью понять, что быстрее, вы должны понять, как работает CSS-парсер.

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

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

Так что да, чтобы ответить на ваш вопрос:

$('tag.класс') быстрее, чем просто $('.класс"). Зачем? В первом случае jQuery использует собственную реализацию браузера для фильтрации выбора до тех элементов, которые вам нужны. Только тогда он запускает медленнее .реализация класса фильтрации вплоть до того, что вы просили.

во втором случае jQuery использует свой метод для фильтрации каждого элемента путем захвата класса.

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

вот как увеличить производительность ваших селекторов jQuery:

• выберите по #id, когда это возможно (результаты теста ~250 быстрее)
• укажите область вашего выбора ($('.select', this))

Я добавлю примечание, что в 99% веб-приложений, даже ajax тяжелых приложений, скорость соединения и ответ веб-сервера будет управлять производительностью вашего приложения, а не javascript. Я не говорю, что вы должны писать намеренно медленный код или что вообще знать, что вещи, вероятно, будут быстрее, чем другие, не очень хорошо.

но мне интересно, если вы пытаетесь решить проблему, которая на самом деле не существует, или даже если вы оптимизируете для что-то, что может изменить в ближайшем будущем (скажем, если больше людей начинают использовать браузер, который поддерживает getElementsByClassName() функция, упомянутая ранее), что делает ваш оптимизированный код на самом деле работать медленнее.

еще одним местом для поиска информации о производительности является страница анализа производительности селекторов Уго Видаля Тейшейры.

http://www.componenthouse.com/article-19

Это дает хороший прогон скоростей для селектора по идентификатору, селектора по классу и имени тега префикса селектора.

самые быстрые селекторы по id были: $("#id")

самый быстрый селектор по классу был: $('tag.класс')

Так что префикс только по тегу помогли при выборе по классам!

Я был в некоторых списках рассылки jQuery и из того, что я там читал, они, скорее всего, фильтруют по имени тега, а затем по имени класса (или наоборот, если это было быстрее). Они одержимы скоростью и будут использовать все, чтобы получить хоть каплю производительности.

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

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

рассмотрите возможность использования библиотеки Оливера Стила последовательно для вызова методов с течением времени, а не всех сразу.

http://osteele.com/sources/javascript/sequentially/

метод "в конечном итоге" помогает вам вызвать метод через определенный период времени от его первоначального вызова. Метод "последовательно" позволяет поставить в очередь несколько задач в течение определенного периода времени.

очень полезно!

A полезные советы из вопроса, который я задал: используйте стандартные селекторы CSS везде, где это возможно. Это позволяет jQuery использовать селекторы API. Согласно тесты, выполненные Джоном Resig, это приводит к производительности селекторов. Такие функции, как :has() и :contains() следует избегать.

из моих исследований поддержка селекторов API была введена с jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1.

если я не ошибаюсь, jQuery также является двигателем снизу вверх. Это значит $('#foo bar div') намного медленнее, чем $('bar div #foo'). Например, $('#foo a') пройдет через все a элементы на странице и посмотреть, если у них есть предок #foo, что делает этот селектор чрезвычайно неэффективно.

отставка, возможно, уже оптимизирована для этого сценария (меня бы не удивило, если бы он это сделал - я считаю, что он сделал в своем шипящем двигателе, но я не уверен на 100%.)

Я считаю, что выбор по ID сначала всегда быстрее:

$("#myform th").css("color","red");

должно быть быстрее, чем

$("th").css("color","red");

однако мне интересно, насколько цепочка помогает при запуске с идентификатором? Это

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

быстрее, чем это?

$("#myform th").css("color","red");
$("#myform td").css("color","blue");