Как увеличить скорость работы jQuery скрипта

[atd]

Спасибо статью! Большинство этих советов можно отнести не только к jQuery, но и к другим фреймворкам и pure JS.

P.S.: опечатка: getElementByTagName → getElementsByTagName

[konclave]

спасибо, исправил.

[Kain_Haart]

Боян

[Ewg]

Минусуйте, но это так.

[skorney]

Согласен. Вдобавок не авторский и плохо отформатированный

[mcm69]

Совет №3 бесполезен по сути — jQuery кеширует селекторы.

[Auru]

Запросы кешируются только если браузер поддерживает DOM Mutation Events. IE не поддерживает эти события и селекторы не кешируются. Всегда можно самому краткоскрочно закешировать хотя бы банальный $(this) в each-методе.

[mcm69]

Не знал про это, спасибо, интересно.

[konclave]

Я не нашел упоминания об этом в докуменатции. И при просмотре кода jQuery тоже не увидел того, что селекторы кэшируются. Я, правда, не очень подробно смотрел.

Может быть направите меня на то место где в jQuery механизм кеширования?
Интересно было бы посмотреть подробнее.

[mcm69]

Я когда-то читал, но сейчас нагуглить не могу почему-то. Пардон.

[zhekanax]

а может оно не в самом jQuery а в Sizzle который отвечает за селекторы. только ничего похожего на кеширование в основном методе Sizzle не увидел :)

[kostyl]

Хорошая статья, но подобное я уже видел где-то тут по ссылке…

[zercool]

Скорее всего вот тут — habrahabr.ru/blogs/jquery/52201/

[plsc_Rover]

Спасибо, статья интересная. Было бы совсем здорово, если бы были приведены примеры того на сколько эти подходы увеличивают скорость (например в следующей статье ;) ).

P.S. понятное дело, что на разных страницах будет разное время, но можно просто выбрать какую-нибудь страницу в интернете с большим количеством DOM объектов.

[chikuyonok]

Выборка элементов по названию класса — одна из самых медленных выборок в jQuery.

Самая медленная операция в выборке: фильтрация уникальных элементов после того, как было что-то выбрано. А утверждение про медленную выборку по классам отчасти справедливо для старых браузеров, в новых используется getElementsByClassName() и querySelectorAll(), первый работает довольно быстро

Задержать загрузку до $(window).load

Я бы не стал делать таких громких заявлений: есть большая вероятность, что событие долго не сработает, если грузится какой-нибудь счетчик с медленного сервера.

[Auru]

На самом деле не все так однозначно, как написано в статье, все зависит от браузера. Например, в современных браузерах, где есть поддержка querySelectorAll следование некоторым пунктам из статьи наоборот замедлит выполнение. Хорошие статьи по производительности jqueryна русском:
http://mabp.kiev.ua/2009/08/10/presentation-from-coffee-n-code/
http://mabp.kiev.ua/2009/03/29/jquery-profiling/

[konclave]

спасибо, почитаю
ну то есть идем к тому, чтобы разделят код на куски — для старых и медленных и для новых и быстрых =)

[Arion]

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

[ipod]

habrahabr.ru/blogs/jquery/52201/
Уже было. Относительно новым можно считать 8 и 9 пункт.

[hydralien]

ещё и habrahabr.ru/blogs/jquery/63797/

[ruskar]

Ну и ещё первый пункт там спорный, он ориентирован больше для зарубежных разработчиков, а не для российских реалий. Лучше загружать jQuery с Яндекса:
js.static.yandex.net/jquery/1.3.2/_jquery.js
По сравнению с Гуглом, у этого способа гораздо больше шансов оказатся в кеше российского пользователя. А даже если и не окажется в кеше, то загрузится в 3-4 раза быстрее, чем с Гугла (во-первых потому что сервер Гугла зарубежом, соответственно большой пинг; во-вторых потому что у Яндекса с многими провайдерами договорённости о локальном трафике).

[Spree]

11 правил: 1, 2, 3, 4, 5, 6, 7, 8, 9 :)

[zhekanax]

про делегирование событий отдельное спасибо. как-то не задумывался :)

[dfilatov]

Про пункт 1 — насколько я помню Sizzle начинает искать справа налево, а не слева направо. Т.е. он сначала найдет все .of, а потом уже будет смотреть, находятся ли они в #traffic_light.

[konclave]

Да, но если первый селектор стоит #id, то он ставится в качестве context запроса:
кусок кода Sizzle

Иначе было бы очень странно $('#my a') — выбрать все анкоры страницы и среди них искать те, у которых есть родитель с id='my'…

[malyshev]

Пункт 9. Задержать загрузку до $(window).load.
Как-то сомнительно.
Событие window.onload будет вызвано только когда будут загружены все внешние объекты.
А это может вызвать нехорошую ситуацию, когда что-либо будет грузиться слишком долго, например, счетчик, или баннер с другого сайта.
И соответственно инициализация страницы может значительно затянуться.

[konclave]

Да. И надо на это закладываться и не делать так везде и всюду.
Поэтому и не предлагаю перемещать туда инициализацию всего и вся.

[webwin]

А вы тестировали на сколько быстрей работает
$(' .my_class') по сравнению с $('div.my_class')?
Если элементов пару разницы нету, если много (в одном проекте было больше 10000 ) не поможет
Еще бы цифры для сравнения.

[skorney]

Нужно указывать источник перевода.

[konclave]

Я указал, но из-за того что некорректно закрыл тег предыдущей ссылки, кусок текста съелся. Да, и источник был другой. =)

[Jman]

Используйте подзапросы:
var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');
Поскольку мы сохранили объект в переменной, то следующие выборки будут производиться только в сохраненном объекте, а не во всем дереве элементов.

[Jman]

читайте документацию :)

не надо придумывать подзапросы, за вас всё придумали
называется это context

var $traffic_light = $('#traffic_light'),
$active_light = ('input.on', $traffic_light),
$inactive_lights = ('input.off', $traffic_light);

[Jman]

docs.jquery.com/Core/jQuery#expressioncontext

[Razunter]

А не подскажете по конструкции $('#mylist').ready()? Есть ли смысл, как влияет на производительность, когда срабатывает?

[Jman]

смысл есть если это id фрейма

[Razunter]

Нет, просто обычный div
Хочется создать действие, происходящее сразу после загрузки элемента, но до того, как загрузится вся страница

[Jman]

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated
$(document).ready возникает когда елементы DOM готовы к манипуляциям. а не тогда когда загрузится вся страница (window.onload)

[Jman]

тоесть в вашем случае, $('#mylist').ready() не имеет смысла

[Jman]

$(document).ready в некоторых случаях возникает даже до загрузки стилей

[niceteg]

Спасибо. Полезно, грамотно и познавательно.

[Snowcore]

Подправьте в примере №8:

mylib.article.init();

на

mylib.article_page.init();