3

AFAIK、ドキュメントフラグメントの利点は、フラグメントがDOMに挿入されるまで、リフローイベントが発生しないことです。合理的に聞こえますが、DOM外の要素もリフローを引き起こさないようです。

例えば：

// with document fragment
var df = document.createDocumentFragment();
// append a bunch of hyperlinks to df
var container = document.createElement('div');
container.appendChild(df);
document.body.appendChild(container);

// with in-memory element

var container = document.createElement('div');
// append a bunch of hyperlinks to container
document.body.appendChild(container);

これをChromeとFirefoxで実行しましたが、2つのバージョンの間にパフォーマンスの違いは見られませんでした。

この方法の時代を考えるとcreateDocumentFragment（IE6でもサポートされています）、私の理論では、ある時点でより効率的でしたが、ブラウザーレンダリングエンジンの長年の最適化により不要になりました。これは正しいです？

4

3 に答える 3

4

フラグメントは、既存の要素に追加する要素が多数ある場合に使用します。追加する要素が1つしかない場合（その子と一緒に）、パフォーマンスの違いはないと思いますが、同じターゲットに多くの要素を追加する必要がある場合は、フラグメントが適切な場合があります。John Resigは、しばらく前にこのテストを設定しました。これは、ここで実行できます。すべての外観で、適切な状況でフラグメントのパフォーマンスが向上します。

このテーマに関する彼の完全な投稿はここにあります。これは、さまざまなパフォーマンス特性のかなりまともな概要を提供します。

于 2012-11-05T20:35:46.503 に答える
2

通常のDOM挿入では、一度に1つのノード（さらにはその子とその子など）のみを挿入できます。

ドキュメントフラグメントには、DOMに追加する前に共通の親を共有している必要なしに、一度にすべて追加できる複数の「トップレベル」ノードを含めることができます。

あなたの例では、すべての子ノードの親である単一のdivがあるため、問題ではありませんcontainer。したがって、「通常の」DOM挿入は正常に機能します。

于 2012-11-05T20:46:35.787 に答える
1

パフォーマンスが重要です。createDocumentFragmentは非現実的な要素です。それを使用した操作はより高速に実行されます。したがって、DOMに追加する前にfragmemtを積極的に操作する必要がある場合は、createDocumentFragmentを使用してください。

それ以外の場合-違いはありません。

于 2012-11-05T20:37:27.277 に答える