purejs-test (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js">
</script>
<div class="testarea">
  <ul class="test1">
  </ul>
  <ul class="test2">
  </ul>
  <ul class="test3">
  </ul>
</div>
<div class="template">
  <ul class="test1">
    <li class="testli">
      <span class="id">
      </span>
      <a class="link" href="" />
    </li>
  </ul>
</div>
<script>
  var listObj = {
    id: 1,
    name: 'Pelle'
  };
  var listObjs = [];
  var objs = [];
  for (var i = 0; i < 100; i++) {
    listObjs.push(listObj);
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Pure
var _renderList = $('.template > .test1').compile({
  'li.testli': {
    'obj<-': {
      '.id': 'obj.id',
      '.link': 'obj.name',
      '.link@href': function(arg) {
        return 'http://www.example.com';
      }
    }
  }
});
$('.testarea ul.test1').replaceWith(_renderList(listObjs));
ready
Array
var output = [];
var getLink = function(arg) {
    return 'http://www.example.com';
    };
$.each(listObjs, function(key, value) {
  output.push('<li class="testli"><span class="id">' + value.id + '</span><a class="link" href="' + getLink(value) + '">' + value.name + '</a></li>');
});
$('ul.test2').html(output.join(''));
ready
Map
var getLink = function(arg) {
    return 'http://www.example.com';
    };
var arr = $('ul.test3').append(jQuery.map(listObjs, function(obj, index) {
  return '<li class="testli"><span class="id">' + obj.id + '</span><a class="link" href="' + getLink(obj) + '">' + obj.name + '</a></li>';
}));
$('ul.test3').html(arr.join(''));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));
ready

Revisions

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