About a month ago Firefox 8ではinnerAddressと共にIE4に追加されたinsertAdjacentHTMLメソッドが実装されました。 thisベンチマークによると、insertAdjacentHTMLは通常で、はinnerHTMLよりも高速です。insertAdjacentHTMLはinnerHTMLよりもずっと高速ですか？
私は両方とも同じHTMLパーサを呼び出すと仮定していますが、その違いはなぜ劇的なのでしょうか？ insertAdjacentHTMLは単純なメソッド呼び出しですが、innerHTMLはgetter/setterであり、おそらくそれには少しオーバーヘッドがありますが、それほど多くは想像もしません。
work.innerHTML += "<span>test</span>";は、work.innerHTML = work.innerHTML + "<span>test</span>";に相当します。つまり、実行するたびに、既存のすべての内容をworkにシリアライズして、ロット全体と追加のスパンを再解析する必要があります。
work.insertAdjacentHTML("BeforeEnd", "<span>test</span>");は、毎回1つのスパンのみを解析してから、小さなドキュメントフラグメントをDOMに添付します。
私は良いブラウザが 'work.innerHTML + =" test "を" modernHTML "に単に追加するように最適化したいと願っていますブラウザは文字列の連結を最適化します。私は間違っている可能性がありますが、ブラウザベンダーの誰もこれを考えていないと驚くかもしれません。 –
これほど簡単ではありません。シリアライズ/解析サイクルには、いくつかのノードプロパティをリセットしたり、動的にアタッチされたイベントハンドラを削除したりするなど、さまざまな副作用があります。最適化するには、それらを正確に複製する必要があります。ブラウザの製造元は、より良いことをする必要があります。 'Element.innerHTML + = ...'は、JSコードで避けがたい反パターンです。ただしないでください。 – Alohci
+1意味があります。私は 'e.innerHTML + = ... 'は反パターンであることに同意します。 Ajaxに関連するいくつかの有効な使用法がありますが、他の場所ではなぜそれが有害である（なぜなら遅くならない）のはなぜ分かりません。 –
セッターは、新しいものを追加する前に既存のすべての子ノードを削除する必要があります。
これが唯一の理由かどうかはわかりませんが、それは確かに要因です。
'appendChild'を使うと、両方よりもはるかに高速です。おそらくパーサが必要ないからです。 'appendChild'と比較したとき、' insertAdjacentHTML'と 'innerHTML'の違いは重要ではないようです。ただし、html文字列を解析する必要がある場合、 'appendChild'はあまり役に立ちません。 http://jsperf.com/insertadjacenthtml-perf/28 – oriadam