innerHTMLのスピードテスト

gistfile1.js

// firefox:
// test1a -> 18.83772399999998
// test1b -> 12.661566999999877
// test1c -> 0.32783100000006016
// chrome:
// test1a -> 53.948999993735924 
// test1b -> 28.740999987348914 
// test1c -> 0.7929999846965075 

// 準備
var data = [];
for ( var i = 1; i <= 100; i++ ) {
  data.push('アイテム' + i);
}

// 毎回全入れ替え＋innerHTML毎回参照
function test1a() {
  var ul = document.querySelector('#output');
  for ( var i = 0, len = data.length; i < len; i++ ) {
    ul.innerHTML += '<li><p>' + data[i] + '</p></li>';
  }
}

// 毎回全入れ替えするけど、innerHTML参照1回
function test1b() {
  var ul = document.querySelector('#output'),
      html = ul.innerHTML;
  for ( var i = 0, len = data.length; i < len; i++ ) {
    html += '<li>' + data[i] + '</li>';
    ul.innerHTML = html;
  }
}

// 1回だけ全入れ替え
function test1c() {
  var ul = document.querySelector('#output'),
      html = '';
  for ( var i = 0, len = data.length; i < len; i++ ) {
    html += '<li>' + data[i] + '</li>';
  }
  ul.innerHTML = html;
}