Сравнение производительности JS-библиотек

Организация теста

Перед тем как начать собственно сравнение пришлось сделать «тестовый движок» — несколько строк кода, которые позволяли далее запускать несколько разных тестов. После этого к сравнительному тестированию было легко добавлено также выполнение тех же операций на «голом» javascript (назовем его native-вызовами) и с использованием библиотеки ExtJS. Можно было бы добавить и еще что-нибудь, но тут запас моих знаний закончился, а изучать библиотеку только ради теста — не хотелось.
Никаких хитростей нет и подход к тестированию самый примитивный. Собственно замер обеспечивался крохотной функцией, которая просто выполняла требуемую функцию необходимое число раз и возвращала скорость исполнения — количество операций в миллисекунду:

runTest = function(test, count){   var start = new Date().getTime();   for(var i=1;i<count;i++) test();   var end = new Date().getTime();   var time = end - start;   return count/time; } 

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

runGroup = function(label, tests, count){   var res = {};   for(var key in tests) res[key] = runTest(tests[key], count);   saveResult(label, res); } 

Это позволило сделать вызов теста в таком «наглядном» виде:

runGroup('Имя теста',{ "native": function1, "jQuery": function2, "closure": function3, "extJS": function4 }) 

Ну и ко всему этому была добавлена функция, усредняющая результаты нескольких тестов и рисующая красивую табличку для наглядного восприятия. Полный код тестовой страницы будет ниже.

Тестируемые операции

Выбор операций для теста осуществлен субъективно — наиболее часто используемые, на мой взгляд, операции при разработке анимированых web-страниц. Способ реализации операции для каждой из библиотек также, по моему мнению, наиболее естественный — я постоянно встречаю подобные фрагменты и в своем и в чужом коде.

Поиск элемента по идентификатору

Без поиска элементов не обходится, наверное, ни одна web-страница. Все знают, что поиск по id наиболее оптимален, и используют его. Для теста использовался следующих код:

document.getElementById('id');  // native goog.dom.getElement('id');      // closure $('#id');                       // jQuery Ext.get('id');                  // ExtJS 

Поиск элементов по классу

Естественно, поиском по идентификатору дело не ограничивается. Зачастую приходится искать элементы более «изощренным» образом. Для теста я выбрал поиск по классу:

document.getElementsByClassName('class'); // native goog.dom.getElementByClass('class');      // closure $('.class');                              // jQuery Ext.select('.class');                     // ExtJS 

Добавление элемента

Естественно, надо уметь добавлять элементы на страницу. Для тестовых целей использовалось добавление однотипных span непосредственно к body. Тут код без использования библиотек уже существенно длиннее, чем с ними:

goog.dom.appendChild(document.body, goog.dom.createDom('span',{class:'testspan'})); // closure $(document.body).append($('<span class="testspan">'));                              // jQuery Ext.DomHelper.append(document.body, {tag : 'span', cls : 'testspan'});              // ExtJS // native var spn = document.createElement('span'); spn.setAttribute('class','testspan'); document.body.appendChild(spn); 

Определение класса элемента

Естественно, зачастую возникает и потребность в определении свойств элементов. Я выбрал определение списка классов, присвоенных элементу (поиск самого элемента осуществлялся вне цикла тестирования):

nElement.getAttribute('class').split(' ');  // native goog.dom.classes.get(gElement);             // closure jElement.attr('class').split(' ');          // jQuery eElement.getAttribute('class').split(' ');  // ExtJS 

Изменение класса элемента

Обычно определять класс даже и не нужно — необходимо добавить его, или удалить. Все библиотеки предлагают естественный метод toggle для данного случая, но вот на голом javascript пришлось написать целую портянку:

goog.dom.classes.toggle(gElement, 'testToggle');  // closure jElement.toggleClass('testToggle');               // jQuery var classes = eElement.toggleCls('testToggle');   // ExtJS // native var classes = nElement.className.split(' '); var ind = classes.indexOf('testToggle'); if(ind==-1) classes.push('testToggle'); else classes.splice(ind,1); nElement.className = classes.join(" "); 

Изменение стиля элемента

Ну и наиболее часто используемая операция с элементом — установка ему определенных css-свойств:

nElement.style.backgroundColor = '#aaa';                      // native goog.style.setStyle(gElement, {'background-color': '#aaa'});  // closure jElement.css({'background-color': '#aaa'});                   // jQuery eElement.setStyle('backgroundColor','#aaa');                  // ExtJS 

Собрав воедино все описанные выше элементы я получил страничку для тестирования, полный текст которой можно увидеть под спойлером. Любой желающий может сохранить это в html-файл и повторить тест или добавить туда что-то свое.

<!DOCTYPE html> <html>  <head>   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>   <script src='http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js'></script>   <script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>   <script>     goog.require('goog.dom');     goog.require('goog.dom.classes');     goog.require('goog.style');   </script>   <style>     table{border-collapse:collapse;}     th {font-size:120%; }     td {border: solid black 1px; width: 180px; height: 60px; text-align: center; }     .rowlabel {width: 120px; text-align: left; background-color: beige;}     .avg {font-weight: bold; font-size:120%; color: darkblue;}   </style>   <title>Benchmark</title>  </head>  <body>   <div id="testid" class="testclass"></div>   <button onclick="getBenchmark()">Run</button>   <table id="result"></table>  </body> </html> <script> var runCount = 4;       // сколько раз запускать весь набор тестов var testSize = 1000;     // количество итераций в одном запуске  // поехали... getBenchmark = function(){   for(var i = 0;i<runCount;i++) allTests();   showResults(); }  allTests = function(){   // сохраняем ссылку на элемент для последующих манипуляций   var nElement = document.getElementById('testid');   var gElement = goog.dom.getElement('testid');   var jElement = jQuery('#testid');   var eElement = Ext.get('testid');    // поиск по идентификатору   runGroup('Id lookup',{     "native":  function(){var element = document.getElementById('testid');},     "closure": function(){var element = goog.dom.getElement('testid');},     "jQuery":  function(){var element = jQuery('#testid');},     "ExtJS":   function(){var element = Ext.get('testid');}   }, 500*testSize);   // поиск по классу   runGroup('Class lookup',{     "native":  function(){var elements = document.getElementsByClassName('testclass');},     "closure": function(){var elements = goog.dom.getElementByClass('testclass');},     "jQuery":  function(){var elements = jQuery('.testclass');},     "ExtJS":   function(){var elements = Ext.select('.testclass');}   }, 200*testSize);   // добавление элемента   runGroup('Append span',{     "jQuery":  function(){jQuery(document.body).append(jQuery('<span class="testspan">'));},     "closure": function(){goog.dom.appendChild(document.body, goog.dom.createDom('span',{class:'testspan'}));},     "ExtJS":   function(){Ext.DomHelper.append(document.body, {tag : 'span', cls : 'testspan'});},     "native":  function(){                   var spn = document.createElement('span');                   spn.setAttribute('class','testspan');                   document.body.appendChild(spn);                 }   }, testSize);   // удалим все добавленные элементы   jQuery('.testspan').remove();   // определение класса элемента   runGroup('Read classes',{     "native":  function(){var classes = nElement.getAttribute('class').split(' ');},     "closure": function(){var classes = goog.dom.classes.get(gElement);},     "jQuery":  function(){var classes = jElement.attr('class').split(' ');},     "ExtJS":   function(){var classes = eElement.getAttribute('class').split(' ');}   }, 100*testSize);   // изменение класса элемента   runGroup('Toggle class',{     "closure": function(){goog.dom.classes.toggle(gElement, 'testToggle');},     "jQuery":  function(){jElement.toggleClass('testToggle');},     "ExtJS":   function(){var classes = eElement.toggleCls('testToggle');},     "native":  function(){                   var classes = nElement.className.split(' ');                   var ind = classes.indexOf('testToggle');                   if(ind==-1) classes.push('testToggle');                   else classes.splice(ind,1);                   nElement.className = classes.join(" ");                 }   }, 50*testSize);   // изменение css-свойства   runGroup('Styling',{     "native":  function(){nElement.style.backgroundColor = '#aaa';},     "closure": function(){goog.style.setStyle(gElement, {'background-color': '#aaa'});},     "jQuery":  function(){jElement.css({'background-color': '#aaa'});},     "ExtJS":   function(){eElement.setStyle('backgroundColor','#aaa');}   }, 50*testSize); }   var savedResults = {}; var tests = [];  // форматирование результатов showResults = function(){   jQuery('#result').empty();   // имена тестов - в заголовки столбцов   var str = '<tr><th></th>'   for(var i=0;i<tests.length;i++){     str += '<th>' + tests[i] + '</th>';   }   str += '</tr>';   for(var label in savedResults){     // отдельная строка для каждой группы     str += '<tr><td class="rowlabel">'+label+'</td>'     for(var i=0;i<tests.length;i++){       str += '<td>';       var key = tests[i];       var res = savedResults[label][key];       if(res){         var detail = '';         var total = 0;         for(var k=0;k<res.length;k++){           if(k==0) detail += Math.round(res[k]);           else detail += ', ' + Math.round(res[k]);           total += res[k];         }         if(res.length > 0) total = total / res.length;         str += '<span class="avg">'+Math.round(total)+'</span><br>'+detail;       }       str+='</td>';     }   }   jQuery('#result').append(str); }  // сохранение результатов saveResult = function(label, result){   if(!savedResults[label]) savedResults[label] ={};   for(var key in result){     if(tests.indexOf(key)==-1) tests.push(key);     if(!savedResults[label][key]) savedResults[label][key] = [];     savedResults[label][key].push(result[key]);   } }  // запуск группы однотипных тестов runGroup = function(label, tests, count){   var res = {};   for(var key in tests) res[key] = runTest(tests[key], count);   saveResult(label, res); }  // выполоняем функцию требуемое число раз runTest = function(test, count){   var start = new Date().getTime();   for(var i=1;i<count;i++) test();   var end = new Date().getTime();   var time = end - start;   return count/time; } </script> 

Результаты теста

Указанный тест я выполнил во всех браузерах, установленных на моей машине. Это было сделано не с целью сравнить браузеры, а для того, чтобы убедиться, что библиотеки под разными браузерами ведут себя относительно одинаково. Соответственно, заботиться об обновлении версий я тоже не стал. Результаты в табличках ниже. (Жирным шрифтом в каждой ячейке показано усредненное значение четырех тестов, обычным -значения в каждом из тестов).

Chrome

Версия 28.0.1500.72

Opera

Версия 12.10.1652

Firefox

Версия 22.0

Internet Explorer

Версия 9.0.8112.16421

Итоги

Наглядно сравнительные результаты можно увидеть на диаграмме, которая построена по результатами тестирования в Chrome (результаты были нормированы, так чтобы разные группы тестов уместились на одной диаграмме):

Как и ожидалось манипуляции с DOM на jQuery относительно медленные, но разрыв на порядок стал для меня неожиданностью. А вот манипуляции с атрибутами элементов и на jQuery и на Сlosure практически одинаковы (и заметно уступают extJS, который напротив несколько проигрывает в манипуляциях с DOM). В целом мое доверие к jQuery после этих тестов несколько пошатнулось, но, несмотря на это, вспомогательные функции в самом тесте написаны с использованием именно этой библиотеки.

Не думаю, что из этих результатов стоит делать далеко идущие выводы — для подавляющего большинства web-приложений не требуется действительно массового выполнения ни одной из указанных операций, но иногда все-таки стоит обращать внимание на используемые инструменты и выбирать те, которые наилучшим образом подходят для задачи. Ни одна из библиотек не запрещает использование native-методов работы с DOM и при необходимости всегда можно обратиться к ним минуя все библиотечные обертки.