jQuery Template

Benchmark created by Milan Adamovsky on

Description

Show differences of in-memory manipulation-then-commit vs. immediate DOM manipulation

Preparation HTML

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

<div id="templateA2ZLink" style="display: none;">
        <a href="#"></a>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
DOM
var ucase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (i = 0; i < 26; i++) {
        Letter = ucase.substring(i, i + 1);
        $("#templateA2ZLink a").html(Letter);
$("#A2ZLetters").append($("#templateA2ZLink").html());
}
 
ready
Memory
var $templateContainer = $("#templateA2ZLink"),
    templateContent = $templateContainer.html(),
    abc = "ZYXWVUTSRQPONMLKJIHGFEDCBA".split(""),
    abcLength = abc.length,
    templateOutput = [];
        

while(abcLength--)
 {
  var letter = abc[abcLength];

  templateOutput.push($("a", ["<div>", "</div>"].join(templateContent)).html(letter).parent().html());
 }

$("#A2ZLetters").append(templateOutput.join(""));
 
ready

Revisions

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

  • Revision 1: published by Milan Adamovsky on