various dom appends (v16)

Revision 16 of this benchmark created on

Description

Test which method is fastest to append multiple elements to DOM.

Preparation HTML

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

<div id="content" style="display: none;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  </div>

<div>
  <h5>DocumentFragment</h5>
  <div id="df-target"></div>
</div>

<div>
  <h5>appendChild</h5>
  <div id="appendchild-target"></div>
</div>

<div>
  <h5>innerHTML</h5>
  <div id="innerhtml-target"></div>
</div>

Setup

content   = $('#content')[0];
    innerHtml = content.innerHTML;
    df        = document.createDocumentFragment();
        
    dfTarget          = $('#df-target')[0];
    appendChildTarget = $('#appendchild-target')[0];
    innerHtmlTarget   = $('#innerhtml-target')[0];

Teardown


    while (n = dfTarget.firstChild) {
      dfTarget.removeChild(n);
    }
    while (n = appendChildTarget.firstChild) {
      appendChildTarget.removeChild(n);
    }
    while (n = innerHtmlTarget.firstChild) {
      innerHtmlTarget.removeChild(n);
    }
   

Test runner

Ready to run.

Testing in
TestOps/sec
documentFragment
var el;

for (var i = 0; i < 10; i++) {
    el = document.createElement('div');
    el.textContent = i;
    el.className = 'test';
    el.style.WebkitTransform = 'translate(0px, 20px)'; // el.style.top = '20px';
    df.appendChild(el); 
}

dfTarget.appendChild(df);
ready
appendChild
var el;

for (var i = 0; i < 10; i++) {
    el = document.createElement('div');
    el.textContent = i;
    el.className = 'test';
    el.style.WebkitTransform = 'translate(0px, 20px)'; // el.style.top = '20px';
    appendChildTarget.appendChild(el); 
}
ready
innerHTML
innerHtmlTarget.innerHTML = innerHtml;
ready
documentFragment no setattribute
var el;

for (var i = 0; i < 10; i++) {
    el = document.createElement('div');
    el.textContent = i;
    el.className = 'test';
    // el.setAttribute('style', 'top: 20px;');
    df.appendChild(el); 
}

dfTarget.appendChild(df);
ready
appendChild no setAttribute
var el;

for (var i = 0; i < 10; i++) {
    el = document.createElement('div');
    el.textContent = i;
    el.className = 'test';
    // el.setAttribute('style', 'top: 20px;');
    appendChildTarget.appendChild(el); 
}
ready
documentFragment top
var el;

for (var i = 0; i < 10; i++) {
    el = document.createElement('div');
    el.textContent = i;
    el.className = 'test';
    el.style.top = '20px';
    df.appendChild(el); 
}

dfTarget.appendChild(df);
ready
appendChild top
var el;

for (var i = 0; i < 10; i++) {
    el = document.createElement('div');
    el.textContent = i;
    el.className = 'test';
    el.style.top = '20px';
    appendChildTarget.appendChild(el); 
}
ready

Revisions

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