◆ 要素を作るときは innerHTML を使うと遅いですが
◆ 要素の中身を空にするときは innerHTML が早いです 

要素を作るときは innerHTML を使うと遅いから createElement して appendChild するのがいいと聞きますが 消す場合ってどうなのでしょう?

部分的に消すのは テキスト処理になるので innerHTML でやろうとは思わないですけど 全部まとめて消して 空にしたいってときは innerHTML でやるのがすごく楽です

楽ではありますが 速度は?
パース処理いらない消すだけだし while で子要素のチェックを繰り返して remove するより innerHTML のほうが早そうだけど……

というわけで調べてみました

こんなコード
innerHTML 使うのと 要素を自分で処理するのそれぞれで 追加と削除の速度を測ってます
追加は innerHTML が遅いとあれほど言われてますけど 消すためには作る必要があるので せっかく作るんだしついでに測っとこうってくらいです
function xxx(tag, n){
n = ~~n
t.innerHTML = ""

// i create
console.time("i-create")
var str = "<" + tag + ">" + "</" + tag + ">"
var html = ""
for(var i=0;i<n;i++){
html += str
}
t.innerHTML = html
console.timeEnd("i-create")

// i delete
console.time("i-delete")
t.innerHTML = ""
console.timeEnd("i-delete")

////

// i create
console.time("i-create")
var str = "<" + tag + ">" + "</" + tag + ">"
var html = ""
for(var i=0;i<n;i++){
html += str
}
t.innerHTML = html
console.timeEnd("i-create")

// e delete
console.time("e-delete")
var e
while(e = t.firstChild) e.remove()
console.timeEnd("e-delete")

////

// e create
console.time("e-create")
var e
for(var i=0;i<n;i++){
e = document.createElement(tag)
t.appendChild(e)
}
console.timeEnd("e-create")

// i delete
console.time("i-delete")
t.innerHTML = ""
console.timeEnd("i-delete")

////

// e create
console.time("e-create")
var e
for(var i=0;i<n;i++){
e = document.createElement(tag)
t.appendChild(e)
}
console.timeEnd("e-create")

// e delete
console.time("e-delete")
var e
while(e = t.firstChild) e.remove()
console.timeEnd("e-delete")

}
/** on devtools **/
xxx("div", 10000)
// i-create: 35.000ms
// i-delete: 28.000ms
// i-create: 40.000ms
// e-delete: 45.000ms
// e-create: 50.000ms
// i-delete: 21.000ms
// e-create: 59.000ms
// e-delete: 45.000ms

xxx("p", 10000)
// i-create: 32.000ms
// i-delete: 20.000ms
// i-create: 41.000ms
// e-delete: 50.000ms
// e-create: 43.000ms
// i-delete: 20.000ms
// e-create: 48.000ms
// e-delete: 36.000ms

/** off devtools **/
xxx("div", 100000)
// i-create: 142.000ms
// i-delete: 23.000ms
// i-create: 136.000ms
// e-delete: 71.000ms
// e-create: 110.000ms
// i-delete: 15.000ms
// e-create: 108.000ms
// e-delete: 67.000ms

xxx("p", 100000)
// i-create: 116.000ms
// i-delete: 19.000ms
// i-create: 113.000ms
// e-delete: 64.000ms
// e-create: 97.000ms
// i-delete: 14.000ms
// e-create: 96.000ms
// e-delete: 38.000ms

並びが見づらいですけど こんな結果です
devtools がオンだと遅かったので 10000 回で試してます
devtools がオフだと早かったので 100000 回になってます

devtools ない方が create と delete で差が大きいです
devtools がないと作るのが遅い?

普通に実行するときは devtools は無いはずなので 無しをまとめると

div
createdelete
innerHTML140ms くらい20ms くらい
element110ms くらい70ms くらい

p
createdelete
innerHTML115ms くらい15ms くらい
element96ms くらい50ms くらい

となりました

innerHTML を使うと 作るのは遅くなりますが 消すのは早いようです
空にしたいときは
element.innerHTML = ""
を使うのがよさそうです

それと div と p だと p のほうが早いです
innerHTML の create なら文字数が少ないからとわかるのですが 全体的に p のほうが早いようです
なんででしょうね


今回上のやつでは for 文でひとつひとつ appendChild しています
documentFragment を使うと append が早くなるとは聞きますが 試してみたところ特に効果ナシでした
早くなることもありますが 遅くなることもありました
どっちかというと少し遅くなるよりだった気がします

時間かかるのは DOM のツリーつくるところじゃなくて 描画部分なわけで 描画は JavaScript の処理が一通り終わってからやる最適化がされている最近では あまり効果なしというところでしょうか
DOMツリーの更新なら fragment であっても起きてますし fragment に追加したのを結局最後にツリーに存在する要素にくっつけるのであまり速度面では変わらないってことでしょうか

そんなこともあって documentFrament は 関数で兄弟要素のグループを受け渡しするときに 配列じゃなくて直接 append できる形式なので使ってるくらいです