DOM挿入系の速度

DOMに色々入れるアレ。先日ちょっと実装の時に気になって調べたんですが。

大体の場合は elem.appendChild() > elem.insertAdjacentHTML() > elem.innerHTML の順番でパフォーマンスが良い感じ。

一例

ただ、他の結果見てると条件によって結構左右されるようですが。 elem.appendChild() + document.createDocumentFragment()の 組み合わせが大量にDOM入れる時には最強か。

これ読むと、 elem.innerHTML よりも elem.insertAdjacentHTML() の方が速いって書いてるんだけど、たまに遅い結果も見るんだよな…何でだろう。

ちなみに知ってる人は知ってると思いますが、jsPerfはサイトに検索機能が無いので、目的のもの探すときは

site:http://jsperf.com/ insertAdjacentHTML

のようにググると幸せ。