jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
A Speed test to check the difference in render time when using a) jQuery Template Plugin - http://api.jquery.com/jQuery.template/ b) Native javascript DOM element creation
to loop through an array of objects and render the output.
I like the template binding flexibly that the Template plugin gives but as you can see it's much much slower than native DOM element creation and binding. So good for website use, but probably not so good for low end browser engines like those used in STB and mobile (which is why I needed it for)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<div style="width:400px; height:500px; overflow:scroll; color:gray;">
<ul id="movieList_template"></ul>
</div>
<div style="width:400px; height:500px; overflow:scroll; color:green;">
<ul id="movieList_native"></ul>
</div>
<div style="width:400px; height:500px; overflow:scroll; color:blue;">
<ul id="movieList_Fragment"></ul>
</div>
<div style="width:400px; height:500px; overflow:scroll; color:red;">
<ul id="movieList_InnerHTML"></ul>
</div>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear1: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
function renderjQueryTemplateSpeedTest(){
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList_template" );
}
function renderNativeSpeedTest(){
var holder = document.getElementById("movieList_native");
for (var i=0; i < movies.length; i++)
{
var listItem = document.createElement("li");
var boldItem = document.createElement("b");
listItem.textContent = " " + movies[i].ReleaseYear;
boldItem.textContent = " " + movies[i].Name;
listItem.appendChild(boldItem);
holder.appendChild(listItem);
}
}
function renderFragmentSpeedTest(){
var holder = document.getElementById("movieList_Fragment");
var fr = document.createDocumentFragment();
for (var i=0; i < movies.length; i++)
{
var listItem = document.createElement("li");
var boldItem = document.createElement("b");
listItem.textContent = " " + movies[i].ReleaseYear;
boldItem.textContent = " " + movies[i].Name;
listItem.appendChild(boldItem);
fr.appendChild(listItem);
}
holder.appendChild(fr);
}
function renderInnerHTMLSpeedTest(){
var holder = document.getElementById("movieList_InnerHTML");
var html = '';
for (var i=0; i < movies.length; i++)
{
html += '<li><b>' + movies[i].Name + '</b> (' + movies[i].ReleaseYear + ')</li>';
}
holder.innerHTML = html;
html = null;
}
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
jQuery Template Test |
| ready |
Native DOM Elm Creation |
| ready |
InnerHTML |
| ready |
Fragment |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.