konclave 13 ноя 2009 в 11:58

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

4 мин

9.1K

jQuery*

+68

Комментарии 43

atd 13 ноя 2009 в 12:12

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

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

konclave 13 ноя 2009 в 12:22

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

Kain_Haart 13 ноя 2009 в 12:51

Боян

Ewg 13 ноя 2009 в 15:33

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

skorney 13 ноя 2009 в 15:54

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

mcm69 13 ноя 2009 в 12:56

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

Auru 13 ноя 2009 в 13:12

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

mcm69 13 ноя 2009 в 13:13

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

konclave 13 ноя 2009 в 13:27

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

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

mcm69 13 ноя 2009 в 13:32

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

zhekanax 13 ноя 2009 в 14:18

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

kostyl 13 ноя 2009 в 13:05

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

zercool 13 ноя 2009 в 21:19

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

plsc_Rover 13 ноя 2009 в 13:08

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

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

chikuyonok 13 ноя 2009 в 13:08

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

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

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

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

Auru 13 ноя 2009 в 13:18

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

konclave 13 ноя 2009 в 13:32

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

Arion 13 ноя 2009 в 13:33

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

ipod 13 ноя 2009 в 13:41

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

hydralien 13 ноя 2009 в 15:50

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

ruskar 14 ноя 2009 в 03:50

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

Spree 13 ноя 2009 в 13:58

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

zhekanax 13 ноя 2009 в 14:19

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

dfilatov 13 ноя 2009 в 14:32

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

konclave 13 ноя 2009 в 15:35

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

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

malyshev 13 ноя 2009 в 14:41

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

konclave 13 ноя 2009 в 15:38

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

webwin 13 ноя 2009 в 15:13

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

skorney 13 ноя 2009 в 15:51

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

konclave 13 ноя 2009 в 16:16

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

Jman 13 ноя 2009 в 17:11

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

Jman 13 ноя 2009 в 17:14

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

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

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

Jman 13 ноя 2009 в 17:16

docs.jquery.com/Core/jQuery#expressioncontext

Razunter 13 ноя 2009 в 17:16

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

Jman 13 ноя 2009 в 17:21

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

Razunter 13 ноя 2009 в 17:24

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

Jman 13 ноя 2009 в 17:26

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