Gaperton (gaperton) wrote,
Gaperton
gaperton

Category:

Как ускорить ваш jQuery

Например, вот.
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

Все подобные советы любопытны. Например:
1) Сведите к минимуму манипуляции с DOM. Тормозит.
2) Не используйте поэлементную сборку DOM-дерева. Тормозит! Используйте текстовые конкатенации, и последующую вставку при помощи .html().
3) Используйте групповые обработчики событий, зацепляясь за верхушки DOM-деревьев. То есть - диспетчеризуйте их вручную, не доверяясь jQuery! Ибо тормозит.

И это все правда. От себя могу добавить:
4) Не используйте виджеты jQuery-UI в динамически перегенерируемых фрагментах DOM. Тормозит ацки. Стоит вырезать, например, button() из кода - и все начинает буквально летать.

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

Самый эффективный стиль обозначен выше. Надо применять текстовые шаблонные движки для генерации HTML, вставлять результаты в DOM через .html(), и применять только групповые обработчики событий в тех самых точках, куда через .html() вставляется шаблон.

Что удивительно - так не просто все работает заметно быстрее. Так до кучи еще и код получается сильно проще и компактнее. :) При этом, от jQuery остается минимум - фактически, только его DOM-обертка, простые селекторы, и примитивная DOM-манипуляция. Чудеса, правда?

PS: Информация к размышлению. Простой тест, который только что сделал kurilka.
http://kurilka.livejournal.com/322484.html?thread=2029492#t2029492

Тест на работу с "отзязанными" деревьями, не вставленными в документ. 10 тысяч раз вставить один div внутрь другого. Тремя способами:
x) Манипулируя голым DOM-API браузера.
y) Посредством аналогичных вызовов jQuery.
z) Текстовой конкатенацией, после чего - один раз создать из этого DOM дерево.

Загадайте, каким образом, и во сколько будут отличаться результаты. Загадали? А теперь держитесь:

x (DOM-API): 654ms
y (jQuery): 3391ms
z (text): 70ms

1. Вставка элементов DOM через API jQuery в 5 (пять!) раз медленнее прямой вставки.
2. Конструирование дерева в тексте (разворот шаблона) и последующая его вставка в 10 (десять) раз быстрее прямой манипуляции с DOM, и в 50 (стопицот) раз быстрее манипуляций посредством jQuery.

Вопросы есть, господа присяжные заседатели? Вообще-то есть. Но по большей части риторические, в духе "какого хрена".
Tags: javascript, jquery
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 13 comments