Сравниваем производительность JavaScript фреймворков

Давненько я не сравнивал производительность 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

Сводный график полученных данных:
Chart build on http://charts.hohli.com

Отбросим IE, а то он сильно портит картину:
Chart build on http://charts.hohli.com

Выводы

Самым быстрым фреймворком оказывается jQuery:

  1. jQuery 1.4.2 — 42,24 мс
  2. Prototype 1.7.2 — 47,88 мс
  3. Dojo 1.4.3 — 48,68 мс
  4. ExtJs Core 3.1.0 — 113,16 мс
  5. MooTools 1.2.4 — 127,72 мс
  6. YUI 3.1.1 — 129,32 мс
  7. 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:

  1. Google Chrome 5.0 — 27,71 мс
  2. Safari 4.0.3 — 29,51 мс
  3. Opera 10.53 — 45,31 мс
  4. Mozilla Firefox 3.6.3 — 68,51 мс
  5. 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. Если хотите – добавлю еще фреймворки для сравнения, оставляйте ссылку и название функции для тестирования…

17 thoughts on “Сравниваем производительность JavaScript фреймворков”

  1. Интересно было бы сравнить с querySelector API для тех браузеров которые это поддерживают

  2. Скорость работы фремворка немаловажна, но также следует учитыватьи удобство работы с библиотекой
    радует, что jQuery лидирует в обоих номинациях, как по мне, чего не скажешь о том же Prototype скорость есть, а удобство…

  3. Как я понял, вы проверяете только скорость выборки по селекторам. Получается довольно синтетический тест, так как выборка по селекторам в реальных приложениях никогда не бывает самым узким местом (селекторы обычно простые, все результаты кэшируются в переменных). Гораздо важнее скорость методов работы с домом (append, replace, remove, …).

  4. как и в прошлый раз заявляю – так рисовать графики низя!!!

    сравниваешь фреймворки, а линия (непрерывность) идёт по браузерам. надо наоборот. и вообще тут линии не в тему :) даёшь столбики?!?

  5. Есть одна очень быстрая библиотека “YASS” по функционалу с фрэймворками типа jQuery ей конечно не тягаться, но такой скорости выборки как у этой либы, я еще не видел!

    1. В этой библиотеке используется кэширование селекторов, а так как тесты повторяются многократно с одним и тем же набором данных, то кэширование дает серьезный отрыв в тестах. В реальных же ситуациях, когда выборки производятся однократно, YASS не на много быстрее того же Sizzle в jQuery.

  6. “Цифры какие-то дибильные”..

    А сам тест можно посмотреть? Потому что если это просто тест на скорость работы селекторов – то как отметили выше YASS всех рвет, и WebKit всех рвет по той же причине – потому что он прекеширует DOM.

    1. Спасибо, – подозрения оправдались ))

      Тест не имеет практического смысла по нескольким причинам:
      1) $() – это одна функция всего, и далеко не самая медленная, потому о измерении “скорости работы фреймворка” говорить не приходится.
      2) YASS (с тестами на его родном сайте) и WebKit – будут всех рвать.
      3) Нативы document.querySelector / .querySelectorAll – поддерживаются IE8 и тем более всеми остальными современными броузерами,

Comments are closed.