mekegi/js_test.html

## js_test.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>
<script type="text/javascript">
jQuery.noConflict();
document.write('<script src='+'http://zeptojs.com/zepto.min.js'+'><\/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 zElement = Zepto('#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');},
    "zepto":  function(){var element = Zepto('#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');},
    "zepto":  function(){var elements = Zepto('.testclass');},
    "ExtJS":   function(){var elements = Ext.select('.testclass');}
  }, 200*testSize);
  // добавление элемента
  runGroup('Append span',{
    "jQuery":  function(){jQuery(document.body).append(jQuery('<span class="testspan">'));},
    "zepto":  function(){Zepto(document.body).append(Zepto('<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(' ');},
    "zepto":  function(){var classes = zElement.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');},
    "zepto":  function(){zElement.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'});},
    "zepto":  function(){zElement.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>
</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>
	<script type="text/javascript">
	jQuery.noConflict();
	document.write('<script src='+'http://zeptojs.com/zepto.min.js'+'><\/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 zElement = Zepto('#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');},
	"zepto": function(){var element = Zepto('#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');},
	"zepto": function(){var elements = Zepto('.testclass');},
	"ExtJS": function(){var elements = Ext.select('.testclass');}
	}, 200*testSize);
	// добавление элемента
	runGroup('Append span',{
	"jQuery": function(){jQuery(document.body).append(jQuery('<span class="testspan">'));},
	"zepto": function(){Zepto(document.body).append(Zepto('<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(' ');},
	"zepto": function(){var classes = zElement.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');},
	"zepto": function(){zElement.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'});},
	"zepto": function(){zElement.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>
	</html>