Результаты. Профилируем JavaScript. Технологии будущего. Оптимизация структуры веб-страниц
Как это все применять
Результаты
Ниже приведены результаты вызовов из jQuery 1.3.2 («методом» называется метод jQuery, который запускается с определенными параметрами, «вызовы» — это число вызовов функции, которое происходит во время работы метода, «O(n)» является грубой оценкой сложности вызова функции):
| Метод | Вызовы | O(n) |
| .addClass("test"); | 542 | 6n |
| .addClass("test"); | 592 | 6n |
| .removeClass("test"); | 754 | 8n |
| .removeClass("test"); | 610 | 6n |
| .css("color", "red"); | 495 | 5n |
| .css({color: "red", border: "1px solid red"}); | 887 | 9n |
| .remove(); | 23772 | 2n+n2 |
| .append("<p>test</p>"); | 307 | 3n |
| .append("<p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p>"); | 319 | 3n |
| .show(); | 394 | 4n |
| .hide(); | 394 | 4n |
| .html("<p>test</p>"); | 28759 | 3n+n2 |
| .empty(); | 28452 | 3n+n2 |
| .is("div"); | 110 |
| .filter("div"); | 216 | 2n |
| .find("div"); | 1564 | 16n |
Как можно видеть из этой таблицы по значениям O(n), большинство методов jQuery вызывают, по крайней мере, по одной функции на каждый элемент, который им нужно обработать. addClass запускает около 6 функций на каждый элемент, filter — примерно две, а is — только одну.
Также мы легко видим проблемные методы, напоминающие большие черные дыры, в которые утекает процессорное время — .remove(), .empty() и .html(). Все они имеют сложность вызовов функций n2, что является значительной проблемой для производительности ваших сайтов. Все эти числа выросли по очень простой причине: .html() использует .empty(), .empty() использует .remove(), а .remove() работает крайне неэффективно. Если не начать профилировать вызовы функций на медленное выполнение (к слову сказать, большинство внутренних методов jQuery выполняются очень быстро), то и не удастся обнаружить код, написанный неэффективно.
После внесения необходимых изменений, мы придем к значительно улучшенным числам:
| Метод | Вызовы | O(n) |
| .remove(); | 298 | 3n |
| .html("<p>test</p>"); | 507 | 5n |
| .empty(); | 200 | 2n |
Автоматизированный процесс профилирования кода открывает широкие просторы для исследовательской деятельности. Даже не используя ничего другого, кроме
вышеописанного метода, уже можно значительно улучшить каждый метод jQuery и любой другой клиентской библиотеки.
Также весьма интересно интегрировать описанное профилирование как часть самого процесса разработки — чтобы сразу замечать очевидные недочеты в производительности.
Позиция John относительно философии развития jQuery заслуживает отдельного слова. John изначально закладывается на совместимость со всеми браузерами, чтобы охватить максимальную аудиторию пользователей и разработчиков. А только после этого (когда стало понятно, что jQuery работает не так эффективно, как хотелось бы) он начал ее существенно оптимизировать. С точки зрения маркетинга — очень грамотной подход.