Я ищу способ, которым я могу улучшить производительность селектора вызова jQuery. В частности, такие вещи:
Является $("div.myclass") быстрее, чем $(".myclass")
Я бы подумал, что это возможно, но я не знаю, достаточно ли jQuery, чтобы ограничить поиск по имени тега и т.д. У кого-нибудь есть идеи о том, как сформулировать строку селектора jQuery для лучшей производительности?
Нет никаких сомнений в том, что фильтрация по имени тега намного быстрее, чем фильтрация по имени класса.
Это будет так, пока все браузеры не будут реализовывать getElementsByClassName изначально, как в случае с getElementsByTagName.
В некоторых случаях вы можете ускорить запрос, ограничив его контекст. Если у вас есть ссылка на элемент, вы можете передать его как второй аргумент, чтобы ограничить область запроса:
$(".myclass", a_DOM_element);
должен быть быстрее, чем
$(".myclass");
если у вас уже есть a_DOM_element, и он значительно меньше, чем весь документ.
Чтобы полностью понять, что быстрее, вы должны понять, как работает парсер CSS.
Селектор, который вы передаете, делится на распознаваемые части с помощью RegExp, а затем обрабатывается по частям.
Некоторые селекторы, такие как ID и TagName, используют встроенную версию браузера, которая выполняется быстрее. В то время как другие, такие как класс и атрибуты, программируются отдельно и, следовательно, намного медленнее, требуя циклического перемещения по выбранным элементам и проверки каждого имени класса.
Итак, да, чтобы ответить на ваш вопрос:
$('tag.class') быстрее, чем просто $('. class'). Зачем? В первом случае jQuery использует встроенную версию браузера, чтобы отфильтровать выделение до нужных элементов. Только тогда он запускает медленную фильтрацию реализации .class вплоть до того, что вы просили.
Во втором случае jQuery использует этот метод для фильтрации каждого элемента путем захвата класса.
Это распространяется дальше, чем jQuery, поскольку все библиотеки javascript основаны на этом. Единственный другой вариант - использовать xPath, но в настоящее время он не очень хорошо поддерживается среди всех браузеров.
Как сказал Рейд выше, jQuery работает снизу вверх. Хотя
что означает, что
$('#foo bar div')является лот медленнее, чем$('bar div #foo')
Это не главное. Если у вас #foo, вы все равно ничего не помещаете в селектор, так как идентификаторы должны быть уникальными.
Точка:
.find, .children и т.д.: $('#foo').find('div')$('div.common[slow*=Search] input.rare') скорее чем $('div.rare input.common[name*=slowSearch]') - так как это не всегда применимо, обязательно создайте селекторный порядок, разделив соответственно.Вот как повысить производительность ваших селекторов jQuery:
$('.select', this))Я добавлю, что в 99% веб-приложений, даже в тяжелых приложениях ajax, скорость соединения и ответ веб-сервера будут влиять на производительность вашего приложения, а не на javascript. Я не говорю, что вы должны писать преднамеренно медленный код или что в целом осознание того, что может быть быстрее, чем другие, не очень хорошо.
Но мне интересно, пытаетесь ли вы решить проблему, которая на самом деле еще не существует, или даже если вы оптимизируете что-то, что может измениться в ближайшем будущем (скажем, если больше людей начнут использовать браузер который поддерживает функцию getElementsByClassName(), о которой говорилось ранее), что делает ваш оптимизированный код фактически медленным.
Другим местом для поиска информации о производительности является Hugo Vidal Teixeira Анализ производительности страницы селекторов.
http://www.componenthouse.com/article-19
Это дает хороший выход скорости для селектора по идентификатору, селектору по классу и имени тега префиксов селектора.
Самые быстрые селекторы по id: $( "# id" )
Самый быстрый селектор по классу: $('tag.class')
Так что префикс по тегу помог только при выборе по классу!
Я был в некоторых списках рассылки jQuery и из того, что я там читал, они скорее всего фильтруют по имени тега, а затем по имени класса (или наоборот, если оно было быстрее). Они навязчивы в скорости и будут использовать что-либо, чтобы получить яркость производительности.
Я действительно не стал бы слишком беспокоиться об этом, если вы не используете этот селектор тысячи раз/сек.
Если вы действительно обеспокоены, попробуйте выполнить бенчмаркинг и посмотрите, что быстрее.
Рассмотрите возможность использования библиотеки Oliver Steele Sequential для вызова методов с течением времени, а не сразу.
http://osteele.com/sources/javascript/sequentially/
Метод "в конечном итоге" помогает вам вызвать метод через определенный промежуток времени от его первоначального вызова. Метод "последовательно" позволяет вам ставить несколько задач в течение определенного периода времени.
Очень полезно!
A отличный совет из вопроса, который я задал: используйте стандартные селектор CSS, где это возможно. Это позволяет jQuery использовать API селекторов. Согласно испытаниям, выполненным Джоном Ресигом, это приводит к почти собственной производительности для селекторов. Следует избегать таких функций, как :has() и :contains().
Из моей исследовательской поддержки API Selectors был представлен 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, что делает этот селектор крайне неэффективным.
Resig, возможно, уже оптимизирован для этого сценария (меня это не удивило бы, если бы он это сделал - я считаю, что он сделал это в своем двигателе Sizzle, но я не уверен на 100%.)
Я считаю, что сначала выбор по идентификатору всегда быстрее:
$("#myform th").css("color","red");
должен быть быстрее, чем
$("th").css("color","red");
Однако, интересно, сколько цепочек помогает при запуске с ID? Это
$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");
быстрее, чем это?
$("#myform th").css("color","red");
$("#myform td").css("color","blue");