問題タブ [documentfragment]

要素のすべてのコンテンツをドキュメントフラグメントに置き換えようとしています:

var frag = document.createDocumentFragment()

ドキュメントフラグメントは問題なく作成されています。問題ありません。そこに要素を追加しても問題ありません。を使用して追加できますelement.appendChild(frag)。それもうまくいきます。

jQuery の HTML に似た「置換」メソッドを作成しようとしています。古いブラウザとの互換性については心配していません。要素のすべてのコンテンツを置き換える魔法の関数はありますか?

私は試しました（私が見つけることができるすべてelement.innerHTML = frag.cloneNode(true)の「要素コンテンツの置換」ウィキに従って）、それは機能しません。それは私に与えます。<div>[object DocumentFragment]</div>

ライブラリはありません。jQuery ソリューションもありません。

わかりやすくするために、「魔法の」ソリューションを探しています。既存のすべての要素を一度に1つずつ削除してから、フラグメントを追加する方法を知っています。

ライブラリはありません。私のコントロールを超え。

ドキュメントフラグメントを dom に追加しています。これはすべて機能します。問題ありません。

フラグメントが追加された後、ノード リストを保持/取得するにはどうすればよいですか? 関連コード:

繰り返しますが、これはうまくいきます！DOM に何かを追加する方法についてのトラブルシューティングは必要ありません。

を設定var e = element.appendChild(frag);すると、すべてが正常に追加されますが、e= 空のドキュメント フラグメントです。

ここで滑らかな魔法のブードゥー教を探しています。dom 全体をループさせないでください。コンテンツは、子の有無にかかわらず、1 つまたは複数のノードである可能性があります。querySelectorAll または許容される何かに何らかのトリックがある場合。

ありがとう！

EDIT さらに突き詰めると、e上記は実際にはvarへの返された参照でありfrag、domに追加した後は空であることがわかります。要素がフラグメントからドームにきれいに滑り落ち、フラグメントが空っぽになったようなものです。

私は Backbone.js アプリで documentFragments を使用することを検討してきましたが、documentFragment を親 DOM 要素に追加するときに「cloneNode」が使用されている例を見るのはなぜだろうと思っていました。

例はここで見ることができます。DocumentFragment セクションを見下ろすと、次のように表示されます。

「oFrag」が単に追加されるのではなく複製されるのはなぜですか? 別のブログ投稿では、「cloneNode」を使用していません (比較として)。

JS のパフォーマンスに疑問があります。

次のコードがあるとします。

このコードは、グリッドを作成する他の関数のシェルを作成するだけです。グリッドを作成するプロセスは非常に複雑で、多くの検証が必要です。現在、グリッドを埋めるために 2 つのメソッドを使用しています。1 つは配列変数で html 全体を作成します。もう 1 つは要素を作成し、それらを a に追加しますdocumentFragment。

私の質問は、私が理解しているように、フラグメントを使用するときにパフォーマンスに関して本当に改善があるかどうかです-フラグメントはメモリ上の要素を管理するため、ドキュメントに添付されないため、DOM の再計算やその他の厄介なものをトリガーしません。しかし、私が変数を作成している方法では、コンテナを実際のページに追加するまで、変数はどのDOM要素にも添付されません。

したがって、以前のコードは、次のようにすべてをラップするドキュメントフラグメントを使用するよりもパフォーマンスが優れているかどうか疑問に思っていました:

すでに述べたように、これはパフォーマンスに関する質問です。ベスト プラクティスとしてフラグメントの使用が推奨されていることは知っていますが、それを行うと単にメモリ内に新しいオブジェクトが作成され、何もしないので、この場合フラグメントを捨てることは有効だと思います。

うまくいけば、何人かのjsの第一人者/神がここに希望の光を当てて、この問題を解決してくれることを願っています.

編集：だから、私はこの問題に関連するものを探していましたが、documentFragments が必ずしもパフォーマンスの向上を意味するわけではないようです。

これは、ノードの単なる「メモリ内」コンテナです。フラグメントと a の違いは、<div>フラグメントには親がなく、DOM 上にあることはなく、メモリ内にあることです。つまり、DOM の操作がないため、フラグメントに対して行われる操作は高速です。

documentFragments に関するW3Cのドキュメントは非常に曖昧ですが、要点を言えば、誰もが好むブラウザーは実際のフラグメントを使用せず、代わりにこの MSDN ドキュメントに従って新しいドキュメントを作成します。つまり、IE のフラグメントは遅くなります。

したがって、変数に要素（たとえば）を作成するが、それをDOMに追加しない場合、要素（div、テーブルなど）などを追加し、すべての作業が完了した後（ループ、検証、要素のスタイリング)、その要素が追加されますが、フラグメントと同じですか?<div>

IEが「偽の」フラグメントを使用しているという事実を考えると、少なくともIEではそのアプローチを使用する（フラグメントではなくdivなどの要素を使用する）方が良いと思います.IEは本当に気にしませんが、テストしてください（オフィスのポリシー）。

また、次のように配列にすべての html を作成すると:

そして、これを行います

IE の方がはるかに高速ですが、他の主要なブラウザー (FF、Chrome、Safari、Opera) は、コンテナーを使用してから追加 (フラグメントまたは div) するとパフォーマンスが向上します。

これはすべて、すべての要素を作成するプロセスが非常に高速に行われるためです。24 列で最大 20,000 行を作成するのに約 8 秒から 10 秒かかります。多くの要素 / タグですが、ブラウザーは数秒フリーズするようです。それらはすべて一度に追加されます。1つずつ追加しようとすると、地獄です。

皆さん、ありがとうございました。これは本当に面白くて楽しいものです。

そのため、jQuery は内部でドキュメント フラグメントを使用してレンダリングを高速化することを読みました。しかし、each ループを使用して img 要素を DOM に追加しているこの状況で、jQuery が createDocumentFragment を使用するかどうかを誰かが知っているかどうか疑問に思っていますか?

または、ブラウザのリフローの回数を減らすために、このコードを使用する必要がありますか?

また、displayArray は、JSON ファイル内のパスに基づいて img 要素を作成する他のコード (ここには示されていません) によって取り込まれます。

アドバイスありがとうございます。

私は周りを見回しましたが、これは不可能かもしれませんが、d3の選択機能を使用して、svgマークアップのチャンク全体を取得し、それを複数の複製したい構造のスキーマとして使用できれば素晴らしいでしょう。回数。例：

次のような各要素の塗りつぶしとdを追加して属性を変換するよりも、現在の入力ループにポップする方がはるかに簡単です。

d3がjqueryに似ていることを望んでいると思います。誰かがあなたがそれをどのように行うことができるかについての考えを持っていますか？