underscorevsclonenode

JavaScript performance comparison

Test case created by Josh Vermaire

Info

underscore templating vs cloneNodes

Preparation code

<div id="test"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    singleTemplate = _.template('<div class="shadow_wrap" style="height:87px; width: 87px; max-height: 87px; max-width: 87px;"><div class="shadow"><div class="tl_moment_corner"><div class="peel"></div><img src="/assets/1px.gif"></div><div class="shadow_inner"><div class="border"><div class="crop"><div class="moment_loading"><span></span></div><img id="123456789" class="lazy" src="http://placekitten.com/100/100" style="max-height: 75px; max-width: 75px;" /></div></div></div></div></div>');
   
    j = document.createElement("div")
    j.innerHTML = '<div class="shadow_wrap" style="height:87px; width: 87px; max-height: 87px; max-width: 87px;"><div class="shadow"><div class="tl_moment_corner"><div class="peel"></div><img src="/assets/1px.gif"></div><div class="shadow_inner"><div class="border"><div class="crop"><div class="moment_loading"><span></span></div><img id="123456789" class="lazy" src="http://placekitten.com/100/100" style="max-height: 75px; max-width: 75px;" /></div></div></div></div></div>'
    fragment = document.createDocumentFragment()
    while (j.firstChild) {
      fragment.appendChild(j.firstChild);
    }
   
   
    div = document.createElement('div');
    img = new Image;
   
    shadow_wrap = div.cloneNode(false);
    shadow_wrap.className = 'shadow_wrap';
    shadow_wrapStyle = { height: '87px', maxHeight: '87px', width: '87px', maxWidth: '87px' };
    shadow_wrap.style = shadow_wrapStyle
   
    shadow = div.cloneNode(false);
    shadow.className = 'shadow';
   
    tl_moment_corner = div.cloneNode(false);
    tl_moment_corner.className = 'tl_moment_corner';
   
    peel = div.cloneNode(false);
    peel.className = 'peel';
   
    px = img.cloneNode(false);
    px.src = '/assets/1px.gif';
   
    shadow_inner = div.cloneNode(false);
    shadow_inner.className = 'shadow_inner';
   
    border = div.cloneNode(false)
    border.className = 'border';
   
    crop = div.cloneNode(false);
    crop.className = 'crop';
   
    moment_loading = div.cloneNode(false);
   
    span = document.createElement('span');
   
    lazy = img.cloneNode(false);
    lazy.id = '123456789';
    lazy.className = 'lazy';
    lazy.src = 'http://placekitten.com/100/100';
    lazyStyle = { maxHeight: '75px', maxWidth: '75px' };
    lazy.style = lazyStyle;
   
    moment_loading.appendChild(span);
   
    crop.appendChild(lazy);
    crop.appendChild(moment_loading);
   
    border.appendChild(crop);
   
    shadow_inner.appendChild(border);
   
    tl_moment_corner.appendChild(px);
    tl_moment_corner.appendChild(peel);
   
    shadow.appendChild(tl_moment_corner);
    shadow.appendChild(shadow_inner);
   
    shadow_wrap.appendChild(shadow);
   
    $test = $("#test")
    test = $test.get(0)
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
underscore
$test.append(singleTemplate())
pending…
cloneNodes
test.appendChild(shadow_wrap)
pending…
fragment
test.appendChild(fragment)
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment