Давненько я не сравнивал производительность JavaScript фреймворков, пора это исправить, и обновить данные двухгодичной давности.
В качестве инструмента я взял тест SlickSpeed и установил на свой хостинг, в списке испытуемых оказались следующие фреймворки:
А так же браузеры, установленные на моей системе:
- Mozilla Firefox 3.6.3
- Opera 10.53
- Google Chrome 5.0.375.55 beta
- Safari 4.0.3
- Internet Explorer 8.0
Результаты тестирования
Все тесты проводил 5 раз — для достоверности (т.е. с учетом алгоритма тестирование, результат — среднее значение от 30 запусков). Все расширения браузеров были отключены. Результаты приведены в миллисекундах.
| Dojo 1.4.3 | jQuery 1.4.2 | MooTools 1.2.4 | Prototype 1.6.1 | Prototype 1.7.2 | ExtJS Core 3.1 | YUI 3.1.1 | Avg | |
|---|---|---|---|---|---|---|---|---|
| Firefox 3.6.3 | 62,6 | 52,6 | 89,4 | 68,4 | 42,8 | 109,2 | 54,6 | 68,51 |
| Opera 10.53 | 37,2 | 33,2 | 61,6 | 45,2 | 34,2 | 70,2 | 35,6 | 45,31 |
| Google Chrome 5.0 | 18,20 | 13,60 | 59,40 | 24,60 | 13,60 | 45,00 | 19,60 | 27,71 |
| Safari 4.0.3 | 19,00 | 14,80 | 56,40 | 20,20 | 13,00 | 64,80 | 18,40 | 29,51 |
| Internet Explorer 8.0 | 106,40 | 97,00 | 371,80 | 559,40 | 135,80 | 276,60 | 518,40 | 295,06 |
| Avg | 48,68 | 42,24 | 127,72 | 143,56 | 47,88 | 113,16 | 129,32 |
Сводный график полученных данных:
Отбросим IE, а то он сильно портит картину:
Выводы
Самым быстрым фреймворком оказывается jQuery:
- jQuery 1.4.2 — 42,24 мс
- Prototype 1.7.2 — 47,88 мс
- Dojo 1.4.3 — 48,68 мс
- ExtJs Core 3.1.0 — 113,16 мс
- MooTools 1.2.4 — 127,72 мс
- YUI 3.1.1 — 129,32 мс
- Prototype 1.6.1 — 143,56 мс
И в «медальном зачете» картина та же — Prototype совсем чуть-чуть отстает:
| Dojo 1.4.3 | jQuery 1.4.2 | MooTools 1.2.4 | Prototype 1.6.1 | Prototype 1.7.2 | ExtJS Core 3.1 | YUI 3.1.1 | |
|---|---|---|---|---|---|---|---|
| Firefox 3.6.3 | 4 | 2 | 6 | 5 | 1 | 7 | 3 |
| Opera 10.53 | 4 | 1 | 6 | 5 | 2 | 7 | 3 |
| Chrome 5.0 | 3 | 1 | 7 | 5 | 1 | 6 | 4 |
| Safari 4.0.3 | 4 | 2 | 6 | 5 | 1 | 7 | 3 |
| IE 8.0 | 2 | 1 | 5 | 7 | 3 | 4 | 6 |
| Total | 17 | 7 | 30 | 27 | 8 | 31 | 19 |
А среди самых быстрых браузеров — Google Chrome, на пятки наступает Safari:
- Google Chrome 5.0 — 27,71 мс
- Safari 4.0.3 — 29,51 мс
- Opera 10.53 — 45,31 мс
- Mozilla Firefox 3.6.3 — 68,51 мс
- Internet Explorer 8.0 — 295,06 мс
А в «медальном зачете» они обменялись местами:
| Dojo | jQuery | MooTools | Prototype | Prototype | ExtJS Core | YUI | Total | |
|---|---|---|---|---|---|---|---|---|
| Firefox 3.6.3 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 28 |
| Opera 10.53 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 21 |
| Chrome 5.0 | 1 | 1 | 2 | 2 | 2 | 1 | 2 | 11 |
| Safari 4.0.3 | 2 | 2 | 1 | 1 | 1 | 2 | 1 | 10 |
| IE 8.0 | 5 | 5 | 5 | 5 | 5 | 5 | 5 | 35 |
P.S. Если хотите – добавлю еще фреймворки для сравнения, оставляйте ссылку и название функции для тестирования…
Интересно было бы сравнить с querySelector API для тех браузеров которые это поддерживают
KAndy, зачем? Он ведь и так используется фреймворками.
Скорость работы фремворка немаловажна, но также следует учитыватьи удобство работы с библиотекой
радует, что jQuery лидирует в обоих номинациях, как по мне, чего не скажешь о том же Prototype скорость есть, а удобство…
Как я понял, вы проверяете только скорость выборки по селекторам. Получается довольно синтетический тест, так как выборка по селекторам в реальных приложениях никогда не бывает самым узким местом (селекторы обычно простые, все результаты кэшируются в переменных). Гораздо важнее скорость методов работы с домом (append, replace, remove, …).
как и в прошлый раз заявляю – так рисовать графики низя!!!
сравниваешь фреймворки, а линия (непрерывность) идёт по браузерам. надо наоборот. и вообще тут линии не в тему :) даёшь столбики?!?
2COTOHA, полностью поддерживаю!
Есть одна очень быстрая библиотека “YASS” по функционалу с фрэймворками типа jQuery ей конечно не тягаться, но такой скорости выборки как у этой либы, я еще не видел!
В этой библиотеке используется кэширование селекторов, а так как тесты повторяются многократно с одним и тем же набором данных, то кэширование дает серьезный отрыв в тестах. В реальных же ситуациях, когда выборки производятся однократно, YASS не на много быстрее того же Sizzle в jQuery.
Спасибо, очень интересно !
“Цифры какие-то дибильные”..
А сам тест можно посмотреть? Потому что если это просто тест на скорость работы селекторов – то как отметили выше YASS всех рвет, и WebKit всех рвет по той же причине – потому что он прекеширует DOM.
SlickSpeed открыт для всех желающих: http://github.com/kamicane/slickspeed/
Спасибо, – подозрения оправдались ))
Тест не имеет практического смысла по нескольким причинам:
1) $() – это одна функция всего, и далеко не самая медленная, потому о измерении “скорости работы фреймворка” говорить не приходится.
2) YASS (с тестами на его родном сайте) и WebKit – будут всех рвать.
3) Нативы document.querySelector / .querySelectorAll – поддерживаются IE8 и тем более всеми остальными современными броузерами,
Жаль что в списке нет QooXdoo
сейчас актуально сравнение ExtJS vs QooXDoo