append DOM

JavaScript performance comparison

Revision 3 of this test case created

Info

http://creatorish.com/weblog/6331

Preparation code

<html>
  
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
  </head>
  
  <body>
    <div id="dom">
    </div>
  </body>

</html>
<script>
  Benchmark.prototype.setup = function() {
    var $dom = $("#dom");
    var dom = document.getElementById("dom");
    var testCount = 10000;
  };

  Benchmark.prototype.teardown = function() {
    $dom.children().remove();
  };
</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
昔からよくあるinnerHTML
 
var htm = "<table>";
for (var i = 0; i < testCount; i++) {
  var tr = '<tr>';
  tr += '<th>' + i + '</th>';
  tr += '<td>コンテンツ-' + i + '</td>';
  tr += '<td>これはダミーです</td>';
  tr += '</tr>';
  htm += tr;
}
htm += "</table>";
dom.innerHTML = htm;
 pending…
文字列結合に配列&joinを使ったもの
 
var arr = [];
arr.push("<table>");
for (var i = 0; i < testCount; i++) {
  var a = [];
  a.push('<tr>');
  a.push('<th>' + i + '</th>');
  a.push('<td>コンテンツ-' + i + '</td>');
  a.push('<td>これはダミーです</td>');
  a.push('</tr>');
  arr.push(a.join(''));
}
arr.push("</table>");
dom.innerHTML = arr.join('');
 pending…
文字列結合すべてに配列&joinを使ったもの
 
var arr = [];
arr.push("<table>");
for (var i = 0; i < testCount; i++) {
  var tr = '<tr>';
  tr += '<th>' + i + '</th>';
  tr += '<td>コンテンツ-' + i + '</td>';
  tr += '<td>これはダミーです</td>';
  tr += '</tr>';
  arr.push(tr);
}
arr.push("</table>");
dom.innerHTML = arr.join('');
 pending…
DocumentFragmentを使ったもの
 
var table = document.createElement("table");
var df = document.createDocumentFragment();
df.appendChild(table);
for (var i = 0; i < testCount; i++) {
  var tr = document.createElement("tr");
  var htm = '<th>' + i + '</th>';
  htm += '<td>コンテンツ-' + i + '</td>';
  htm += '<td>これはダミーです</td>';
  htm += '</tr>';
  tr.innerHTML = htm;
  table.appendChild(tr);
}
dom.appendChild(df);
 pending…
ContextualFragmentを使ったもの
 
var htm = "<table>";
for (var i = 0; i < testCount; i++) {
  var tr = '<tr>';
  tr += '<th>' + i + '</th>';
  tr += '<td>コンテンツ-' + i + '</td>';
  tr += '<td>これはダミーです</td>';
  tr += '</tr>';
  htm += tr;
}
htm += "</table>";
if (document.createRange) { // all browsers, except IE before version 9
  var rangeObj = document.createRange();
  rangeObj.selectNodeContents(document.body);
  if (rangeObj.createContextualFragment) {
    // all browsers, except IE
    var documentFragment = rangeObj.createContextualFragment(htm);
    dom.insertBefore(documentFragment, dom.firstChild);
  } else {
    // Internet Explorer from version 9
    dom.insertAdjacentHTML("afterBegin", htm);
  }
} else {
  // Internet Explorer before version 9
  dom.insertAdjacentHTML("afterBegin", htm);
}
 pending…
insertAdjacentHTMLを使ったもの
 
var htm = "<table>";
for (var i = 0; i < testCount; i++) {
    var tr = '<tr>';
    tr += '<th>' + i + '</th>';
    tr += '<td>コンテンツ-' + i + '</td>';
    tr += '<td>これはダミーです</td>';
    tr += '</tr>';
    htm += tr;
}
htm += "</table>";
dom.insertAdjacentHTML("afterBegin", htm);
 pending…
appendChildを使ったもの
 
var table = document.createElement("table");
for (var i = 0; i < testCount; i++) {
    var tr = document.createElement("tr");
    var th = document.createElement("th");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    th.innerHTML = i;
    td1.innerHTML = 'コンテンツ-' + i;
    td2.innerHTML = 'これはダミーです';

    tr.appendChild(th);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
dom.appendChild(table);
 pending…
DocumentFragmentとappendChildを組み合わせたもの
 
var table = document.createElement("table");
var df = document.createDocumentFragment();
df.appendChild(table);
for (var i = 0; i < testCount; i++) {
    var tr = document.createElement("tr");
    var th = document.createElement("th");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    th.innerHTML = i;
    td1.innerHTML = 'コンテンツ-' + i;
    td2.innerHTML = 'これはダミーです';

    tr.appendChild(th);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
dom.appendChild(df);
 pending…
一旦createした要素をcloseNodeしたもの
 
var table = document.createElement("table");
var tr_o = document.createElement("tr");
var th_o = document.createElement("th");
var td1_o = document.createElement("td");
var td2_o = document.createElement("td");
for (var i = 0; i < testCount; i++) {
    var tr = tr_o.cloneNode(false);
    var th = th_o.cloneNode(false);
    var td1 = td1_o.cloneNode(false);
    var td2 = td2_o.cloneNode(false);

    th.innerHTML = i;
    td1.innerHTML = 'コンテンツ-' + i;
    td2.innerHTML = 'これはダミーです';

    tr.appendChild(th);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
dom.appendChild(table);
 pending…
jQuery.appendを使って文字列のHTMLを渡すもの
 
var htm = "<table>";
for (var i = 0; i < testCount; i++) {
    var tr = '<tr>';
    tr += '<th>' + i + '</th>';
    tr += '<td>コンテンツ-' + i + '</td>';
    tr += '<td>これはダミーです</td>';
    tr += '</tr>';
    htm += tr;
}
htm += "</table>";
$dom.append(htm);
 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