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

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

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

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

Несомненно, что фильтрация по имени тега выполняется намного быстрее, чем фильтрация по имени класса.

Так будет до тех пор, пока все браузеры не реализуют изначально getElementsByClassName, как в случае с getElementsByTagName.

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

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

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

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

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

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

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

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

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

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

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

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

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

$(".myclass", a_DOM_element);

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

$(".myclass");

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

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

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

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

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

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

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

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

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

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

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

Из моих исследований поддержка Selectors 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, что делает этот селектор чрезвычайно неэффективным.

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

Я считаю, что выбор по идентификатору всегда быстрее:

$("#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");

Как сказал Рид выше, jQuery работает снизу вверх. Несмотря на то что

that means $('#foo bar div') is a lot slower than $('bar div #foo')

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

Дело в том:

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