document.createDocumentFragment() と jsefficient_javascript スキルの簡単な分析

document.createDocumentFragment() は、単に DOM の使用を節約するためのものです。 DOM 上で JavaScript 操作を行うたびに、ページのレンダリングが変更され、ページ全体が再更新されるため、多くの時間がかかります。この問題を解決するには、ドキュメント フラグメントを作成し、それにすべての新しいノードをアタッチしてから、ドキュメント フラグメントのコンテンツをドキュメントに一度に追加します。
これは私が書いた簡単なテスト ページです:

コードをコピーします コードは次のとおりです:

ノードが追加されるとdocument.body (またはその後のノード) にアクセスすると、ページにこの変更がすぐに反映されます。最初の小さなプログラムの場合、実行には問題ありませんが、問題は document.body.appendChild() を 10 回呼び出し、そのたびにページが更新され、大量のページ フラグメントが生成されることです。 2 番目のコードでは、 document.body.appendChild() が 1 回だけ呼び出されます。つまり、ページを更新する必要があるのは 1 回だけであり、必要な時間は明らかに前のコードよりも短くなります。

上記のテスト コードをテストするために 3 つのブラウザを使用しました。おおよその結果は次のとおりです:
IE7:
方法 1 時間: 140 方法 2時間: 125

Firefox:
メソッド 1 回: 66 メソッド 2 回: 43

Chrome:
方法 1 に使用された時間: 35 方法 2 に使用された時間: 25
得られた結果は依然として理論と一致しています。