drawing in elements in browser

Benchmark created on

Description

how long it takes using different techniques to draw elements in the browser using prototype

Preparation HTML

<div id="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script>
  var data = {
   name: 'someone something',
   date: '02/05/2010',
   title: 'blah blah blah blah',
   content: 'some really really long boring content that no one cares to read.'
  }
  var template = new Template('<div><span>#{name}</span><span>#{date}</span><div>#{title}</div><div>#{content}</div></div>');
  var container = $('container');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
template and insert
$R(1, 100).each(function() {
 container.insert(template.evaluate(data));
});
ready
insert no template
$R(1, 100).each(function() {
 container.insert('<div><span>' + data.name + '</span><span>' + data.date + '</span><div>' + data.title + '</div><div>' + data.content + '</div></div>')
});
ready
store in var and update all at once
var temp = "";
$R(1, 100).each(function() {
 temp += '<div><span>' + data.name + '</span><span>' + data.date + '</span><div>' + data.title + '</div><div>' + data.content + '</div></div>';
});
container.update(temp);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.