«js-core» test drive

Octane, 15.09.2008

«js-core» test driveРешил провести небольшой тест производительности своего JavaScript framework’а «js-core». Для сравнения, конечно же, взял «jQuery», который хорошо знаю и имею отчетливое представление о его работе.

Конечно, «js-core» не столь функционален, как «jQuery», поэтому я решил провести тест, на примере, который можно записать практически одинаково и в моем framework’е и в «jQuery».

js-core:

$.ready(function() {

  for(var i = 0; i < 1000; i++)
    $.n('pre')
    .addClass('xxx')
    .text(i)
    .appendTo(document.body);

  var timeAfter = new Date();

  $.n('p')
  .text(timeAfter.getTime() - timeBefore.getTime())
  .prependTo(document.body);

});

jQuery:

$(document).ready(function() {

  for(var i = 0; i < 1000; i++)
    $('<pre></pre>')
    .addClass('xxx')
    .text(i)
    .appendTo(document.body);

  var timeAfter = new Date();

  $('<p></p>')
  .text(timeAfter.getTime() - timeBefore.getTime())
  .prependTo(document.body);

});

В первую строку каждого framework’а был добавлен следующий код:

var timeBefore = new Date();

«js-core» and «jQuery»

Конфигурация компьютера, на котором производился тест:

  • процессор: Intel Pentium 4 (3000MHz/512kb/HT);
  • метеринская плата: Epox на базе i865PE (fsb 1000MHz);
  • память: 2×512Mb (DDR PC-3200/dual channel);
  • ОС: Windows XP Service Pack 2.

В общем, древний компьютер, приобретенный в далеком 2003 году.

Для тестирования были использованы следующие имеющиеся на тестовом компьютере браузеры:

  • Internet Explorer 6 (из пакета MultipleIEs);
  • Internet Explorer 8 beta 2;
  • Mozilla FireFox 3.0.1;
  • Opera 9.52 сборка 10108;
  • Safari 3.1 сборка 525.13;
  • Google Chrome 0.2.149.29.

Страницы открывались через протокол «file:», т. е. не использовался никакой веб-сервер. Для каждого framework’а на всех браузерах проводилось по 10 попыток загрузки, повторяемых нажатием клавиши «F5», записывалось время, выдаваемое скриптом. Затем было посчитано среднее арифметическое для каждого браузера. XHTML-страницы содержали только необходимые теги, для подключения скриптов и пустое тело <body>.

Результаты теста
  IE6 IE8b2 FireFox 3.0.1 Opera 9.52 Safari 3.1 Google Chrome 0.2
js-core 516 478 212 134 86 103
jQuery 2880 2314 1272 636 716 621

Диаграмма производительности «js-core» и «jQuery»

Как видим «js-core» в данном тесте оказался гораздо быстрее «jQuery», что меня, конечно, очень сильно порадовало :) Заметьте, какой отрыв «js-core» от «jQuery» в тестах IE. «Opera», «Safari» и «Google Chrome» оказались самыми быстрыми в работе с DOM, недалеко от них «FireFox», ну а IE как всегда…

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: js-core | Комментировать

Комментарии (16)

  1. adw0rd / 15.09.2008 в 02:23

    Уговорили, попробую ваш фреймворк, пока он не разросся до jQuery :)

  2. Octane / 15.09.2008 в 02:38

    Спасибо :) надеюсь Вам понравится работать с «js-core»

  3. Ayavryk / 15.09.2008 в 15:15

    >пока он не разросся до jQuery
    До ExtJS :)

    Хотелось бы побыстрее дождаться документации

  4. adw0rd / 15.09.2008 в 15:54

    Ayavryk, на http://code.google.com/p/js-core/ вполне нормальная дока, по крайней мере мне :)

  5. Майк / 15.09.2008 в 18:56

    Несколько непрофессионально сравнивать фреймворки подобными синтетическими тестами…

  6. Skaizer / 15.09.2008 в 20:19

    Несколько непрофессионально сравнивать фреймворки подобными синтетическими тестами…

    Майк, почему, когда они отражают реальную производительность, соответственно и качество написания кода?

  7. vflash / 16.09.2008 в 13:48

    бля, сравнили ж… с пальцем.
    с темже успехом могу заявить что мой «фреймворк» работает в полтора раза быстрее вашего, 125 против ваших 190 на моей машине.

    вот когда функционал js-core приблизится к jquery (рас они схожи по интерфейсу), когда в js-core будет написано $(») а не $.n(‘pre’) , тогда можно будет их сравнить.

  8. Octane / 16.09.2008 в 14:24

    Я привел конкретный пример и сравнил скорость выполнения. Причем здесь синтаксис? В каждом фреймворке свои особенности. Да, «jQuery» гораздо функциональнее, я этого и не скрывал, написав это в начале статьи. С тем же успехом можно сказать, когда в «jQuery» будет возможность записать $.n('pre'), чтобы создать новый узел… Фреймворки разные, не смотря на то, что я использую практически те же названия методов, что и в «jQuery». Если нам нужна возможность записать все через $('') берем «jQuery» и пользуемся, создавать его копию я не собираюсь.

  9. vflash / 16.09.2008 в 15:07

    прелесть jQuery в отм что через одну функцию $() можно получить очень многое. у вас специальная функция $.n(‘pre’) в которой один параметр который большому анализу не подвергается. у jquery там ужасные регекспы которые эту переменную анализируют. потом если сравнить что возвращает $() (jquery)и $.n() то это обьекты разного масштаба, чем больше обьект тем дольше его создавать.

    вы привели я тож привел пример что обычная функция которая создает ноду (просто по входящем параметрам) работает в среднем в 1.5-2 раза быстрее вашего.

    вобщем заметьте какой отрыв моей функции от вашей. не любитель «jQuery» но издеваться над дним такими вот тестами не стоит, не в этом его соль.

  10. Octane / 16.09.2008 в 19:48

    Зачем Вы примешиваете в тест способ реализации функций фреймворков? То, каким образом они работают, должно в меньшей степени интересовать конечного пользователя (в нашем случае программиста). При сравнении продуктов учитывается имеют ли они средства для решения поставленной задачи и как эффективно с ней справляются.

    Задача была в цикле, повторяющемся 1000 раз, создавать новый DOM-узел <pre> с текстом, равным счетчику интераций цикла (i) и добавлять этот узел в конец списка дочерних элементов <body>.

    Оба фреймворка включают в себя набор средств для выполнения поставленной задачи. Было измерено время, которое затрачивается. А то, что в «js-core» для создания нового узла выделена специальная функция, а в «jQuery» это делает универсальная функция, которая проводит большой анализ входного параметра — это уже вопрос реализации функционала фреймворка.

    Мы же можем позволить себе сравнивать «jQuery» и «PrototypeJS» (раз уж «js-core» не считаем пока конкурентом). В обоих продуктах есть сокращенная запись получения ссылки на узел по идентификатору:

    // jQuery
    var node = $('#id');
    
    // PrototypeJS
    var node = $('id');

    и запись вполне похожа. Мы же можем сравнивать скорость выбора элементов по «id»? А то, что «jQuery» окажется медленнее, потому что функция «$()» используется не только в этих целях и приходится выполнять дополнительные проверки, это уже вопрос: «Почему медленнее?».

    …я тож привел пример что обычная функция которая создает ноду…

    Функция не фреймворк, естественно отдельно она быстрее. Простой код возможно был бы еще быстрее.

  11. vflash / 16.09.2008 в 20:57

    разработчики jquery ставят одним из основных достоинств не скорость а красоту кода и простату его освоения. $('<pre>blabla</pre>') запомнить проше чем $.n(). что есть функция n? ода надо посмотреть в документации или залезть в код. В случаи jquery можно уже чтота предположить что делает этот код, просто взгянув.

    и если брать jquery то стоило бы и писать адаптированный для него код для теста, это конечно не значительно но всеже оптимизирует код именно для jquery а не под ваш. Вобшем эт не важно так как вы не с теме и не то сравниваете.

    var tx='';
    for(var i = 0; i < 1000; i++) tx+='<pre>'+i+'</pre>';
    $(tx).appendTo(document.body);
    // не знаю сработает ли но суть ясна думаю
  12. vflash / 16.09.2008 в 21:03

    и еше timeBefore = new Date(); стоило бы поставить перед началом выполнения кода (теста) а не в начале скриптов.

  13. Octane / 16.09.2008 в 21:31

    Попробовал timeBefore = new Date(); поставить в начало, результаты практически не отличаются.

    В случае, если в функцию «jQuery» отправляем строку — HTML-код:

    var tx = '';
    for(var i = 0; i < 1000; i++)
      tx += '<pre class="xxx">' + i + '</pre>';
    $(tx).appendTo(document.body);

    В нормальных браузерах выполняется немного быстрее, но в IE6 наоборот выполнение такого кода намного замедлилось (до ~6500мс). Возможно будет быстрее, если в цикле в массив добавлять строки, а затем выполнить «join», но это уже все не средства фреймворка.

    Более оптимального кода, написанного под «jQuery» я не нашел.

  14. Skaizer / 16.09.2008 в 23:36

    разработчики jquery ставят одним из основных достоинств не скорость а красоту кода и простату его освоения. $(‘<pre>blabla</pre>’) запомнить проше чем $.n().

    vflash Забавно :)), а Вы знакомы с понятием свободы выбора? Если разработчика в первую очередь интересует красота кода, а не его оптимизационная часть, то что ему мешает использовать jQuery?

    что есть функция n? ода надо посмотреть в документации или залезть в код. В случаи jquery можно уже чтота предположить что делает этот код, просто взгянув.

    man brains? Или про Google может не слышали? )) Вы когда не знаете назначения функции методом тыка определяете для чего она нужна? Поглядел бы я на программиста, который отвергает документацию, и не хочет разбираться в коде.

  15. vflash / 17.09.2008 в 00:30

    выбирай, пожалуйста кто вам мешает.

  16. Skaizer / 17.09.2008 в 00:47

    Ну, с JavaScript мне работать не приходится, но если придется, обязательно выберу ;-)

Оставить комментарий

480×60
480×60