JavaScript のヒント DocumentFragment を使用して DOM のレンダリングを高速化する_javascript のヒント

誰もが JavaScript を使用する場合、Web フロントエンド テクノロジの発展に伴い、Ajax リクエストによるデータの取得やページ上のコンテンツの更新など、DOM 要素の操作に JS を使用することがますます増えています。通常、この操作を完了するには、node.appendChild() と同様のメソッドを使用します。このメソッドはバッファリングされていません。つまり、appendChild メソッドを呼び出すたびに、ブラウザはページを再レンダリングします。もちろん、通常は少数の DOM ノードを更新するため、この方法を使用することに問題はありません。ただし、多数の DOM ノードが更新されると、パフォーマンスが低下します。ますます明らかになるでしょう。ブラウザーはページ、特に一部の複雑なタグを常にレンダリングする必要があるため、大量の再レンダリングはパフォーマンスを消費し、ユーザー エクスペリエンスに影響を与えます。では、この種の DOM 操作の効率を向上させる良い方法はあるのでしょうか?

開発中にこのような状況に遭遇することはあまりありませんが、JS が DocumentFragment メカニズムを提供していることを理解する必要があります。これは誰もがよく知っていると思いますが、バッファリング メカニズムは最初に DOM を配置します。ノードが構築された後、DocumentFragment オブジェクトがページに追加されるため、ブラウザーの負担が大幅に軽減されます。たとえば、次のコード:

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

function CreateNodes() {
for(var i = 0;i var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" i "
";
document.body.appendChild(tmpNode)
}
}
function CreateFragments(){
var flagment = document.createDocumentFragment(); 🎜>for(var i = 0;i var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" i "
";
flagment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}

上記のコードは 2 つの関数を提供しますそれぞれ、通常の DOM メソッドと DocumentFragment を使用して、10,000 個の div ノードをページに追加します。2 番目の方法は、最初の方法よりもはるかに高速です。これは、単純に div タグをタイル状に追加したものに過ぎません。より複雑な HTML タグや、複数の層でネストされたタグの場合、パフォーマンスのギャップはより顕著になります。
上記の例を通して、JavaScript アプリケーションを開発するときに、このような多数のノードに遭遇した場合は、代替ソリューションとして DocumentFragment を使用するとよいでしょう。