JavaScript パフォーマンスの最適化 ドキュメント フラグメントの作成 (document.createDocumentFragment)_JavaScript ヒント

ブラウザでは、document.body (または他のノード) にノードを追加すると、ページが更新され、この変更が反映されます。少量の更新の場合は、ループを 1 つずつ挿入することも適切に機能します。これは一般的に行われます。方法を使用します。コードは次のとおりです。

コードをコピー コードは次のとおりです。

for(var i=0;ivar op = document.createElement("span");
var oText = document.createTextNode(i); 🎜>document.body.appendChild(op);
}


ただし、ドキュメントに大量のデータを追加する場合は、ノードを 1 つ追加します。上記のコードのようにすると、この処理が非常に遅くなる可能性があります。

この問題を解決するには、createDocumentFragment() メソッドを導入します。このメソッドは、ドキュメントのフラグメントを作成し、それに挿入する新しいノードをアタッチし、それをドキュメントに一度に追加します。コードは次のとおりです。

コードをコピー コードは次のとおりです。

var oFragmeng = document.createDocumentFragment(); //最初にドキュメントフラグメントを作成します

for(var i=0;ivar op = document.createElement("span"); document.createTextNode(i) ;
op.appendChild(oText);
oFragmeng.appendChild(op); //最初にドキュメントフラグメントに追加します
document.body.appendChild(oFragmeng) ; //最後に 1 回限りドキュメントに追加



テスト後、IE および Firefox でのパフォーマンスが大幅に向上しました。自分でテストできます。
フロントエンドのパフォーマンスの最適化は、細部から始まります。注意を払わないと、重大な結果が生じます。

追記: この最適化は、ループ内に HTML コードを追加することに似ています。