2009-03-04 3 views
6

さまざまな方法の速度をテストし、html要素をDOMに動的に追加します。私はテスターを構築しましたhere(コードは動作していますので、かなり汚れています)。結果は(非常に)色々なブラウザで異なりますが、ChromeはスピードとOperaの良い点をすべて獲得していますが、ここでは問題にはなりません。FirefoxでinnerHTMLが遅いのはなぜですか?

Firefoxでは、divを削除したときに問題が検出されました(childNodesから)。いくつかの50.000 div要素が追加されると、それはここで起こっているだけで

[div].innerHTML = ""; 

を使用して、クリアするために年齢を取りますか? firefoxはこのためにいくつかの本質的なガベージコレクションメソッドを実装しましたか?

答えて

14

私はinnerHTMLプロパティについてはわからないものの= "" あなたはDOMに挿入するためのDocumentFragmentsを使用して1おそらく速いappoachを左:As John Resig shows

ÓlafurWaageがすでに述べたように、innerHTMLは多くの状況ではより高速ですが、W3C標準の一部ではないため、それらが導入されている可能性がはるかに高いです。言うまでもなく、innerHTMLは現代のブラウザでは不可欠な標準ではありません。

This blog postは、innerHTMLを使用して要素を削除すると、Firefoxがそれ自身の後でクリーンアップするのに多くの時間を費やしているようです。

一部のブラウザ(特にFirefox)では、innerHTMLは一般的にDOMメソッドよりもはるかに高速ですが、既存の要素を消去して新しい要素を作成するのに比べて不便です。これを知ることで、標準のDOMメソッドを使って親を削除し、innerHTMLを使って新しい要素を作成することで、要素を破壊する速度を組み合わせることができます。

+0

はい、完全にDocumentFragmentsを逃しました!新しいアイデアを、ありがとう。ブログのリンクもあります。 – KooiInc

+0

そのblogpostについて完全に忘れました。私に思い出させてくれてありがとう。 –

+0

古い質問ですが、私はこの男は、私が知っているコンボ方法の最初の出版のための信用を値すると思う。これは現代のJIT搭載ブラウザではそれほど重要ではないかもしれませんが、それでも私が知る限り大きく動作します:http://blog.stevenlevithan.com/archives/faster-than-innerhtml –

2

innerHTMLはW3C DOM仕様の一部ではありません。

テーブルの一部を書き込むためには使用しないでください.W3C DOMメソッドを使用する必要がありますが、テーブル全体やセルの内容を書き込むために使用できます。

このプロパティのパブリック仕様が存在しないため、実装は大きく異なります。たとえば、テキストがテキスト入力に入力されると、IEは入力のinnerHTMLプロパティの値属性を変更しますが、Geckoブラウザは値属性を変更しません。

here is one set of JavaScript functionsは、DOMを介して文字列として定義された要素の内容を設定したり、DOMから取得した要素の内容を文字列として取得するためにXMLをシリアル化またはパースすることを提案しています。

Source - Mozilla Dev

+0

私はテーブルの一部を書いていません。テストページは、異なるメソッドを使用してコンテナdiv内に50.000個のdivを生成します。 innerHTML = ''の問題はFirefoxでのみ発生し、何が原因なのか不思議です。とにかくあなたの答えをありがとう。 – KooiInc

+0

私は引用符があなたの質問にちょうどいい答えだと思います。 "このプロパティの公開仕様がないため、実装は大きく異なります。" –

+0

'innerHTML'は[DOM Parsing](http://html5.org/specs/dom-parsing.html)仕様で定義されています。 – hsivonen

関連する問題