optimize me

Benchmark created by naugtur on

Description

an optimization exercise

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="testwrapper" class="wrapper">



</div>

Setup

var list=[];
    for (var i=1,l=20;i<=l;i+=1){
    list.push({
     href:"http://jsperf.com",
     name:i+". test your code!"
     });
    }

Test runner

Ready to run.

Testing in
TestOps/sec
bad
$('.wrapper').html("");
$('.wrapper').append("<ul></ul>");
for(var i in list){
$('.wrapper ul').append("<li></li>");
$('.wrapper ul').find('li:last').addClass('row');
$('.wrapper ul').find('li:last').append('<a href="'+list[i].href+'" >'+list[i].name+'</a>');
}
ready
good
var $tmp=$('<ul></ul>');
for(var i=0,l=list.length;i<l;i+=1){
$('<li></li>').addClass('row').html('<a href="'+list[i].href+'" >'+list[i].name+'</a>').appendTo($tmp);
}
$tmp.appendTo($('#testwrapper').empty())
 
ready
better?
var $tmp=$('<ul></ul>'),$li;
for(var i=0,l=list.length;i<l;i+=1){
$li=$('<li></li>').addClass('row');
$('<a></a>').attr('href',list[i].href).text(list[i].name).appendTo($li);
$li.appendTo($tmp);
}
$tmp.appendTo($('#testwrapper').empty())
ready
good2
var $tmp=$('<ul></ul>');
for(var i=0,l=list.length;i<l;i+=1){
$('<li></li>').attr('class','row').html('<a href="'+list[i].href+'" >'+list[i].name+'</a>').appendTo($tmp);
}
$tmp.appendTo($('#testwrapper').empty())
ready
better2
var li="<ul>";
for(var i=0,l=list.length;i<l;i+=1){
li+='<li class="row"><a href="'+list[i].href+'" >'+list[i].name+'</a></li>';
}
li+="</ul>";
document.getElementById('testwrapper').innerHTML=li;
ready

Revisions

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

  • Revision 1: published by naugtur on