DOMの操作を遅らせる主な理由は、再配置のコストが高く、アクセス効率が低いことです。最適化方法には次のものが含まれます。1。アクセス數(shù)を減らし、読み取り値をキャッシュします。 2。バッチ読み取りおよび書き込み操作。 3.変更をマージし、ドキュメントフラグメントまたは非表示要素を使用します。 4.レイアウトジッターを避け、読み書きを中央に処理します。 5.フレームワークまたはRequestAnimationFrameを使用して、非同期に更新します。

DOMを直接操作することは、特に頻繁に更新したり、多數(shù)のノードを処理したりする場合、非常に速度が低下するのが簡単です。主な理由は2つあります。1つは、DOM自體が獨(dú)立したデータ構(gòu)造であり、JavaScriptエンジンとは別に管理されていることです。もう1つは、各変更がブラウザのリフロー（塗り直し）と塗り直し（塗り直し）をトリガーする可能性があり、これらの操作は非常に高価であることです。

DOM操作を最適化するために、鍵は訪問數(shù)を減らし、変更アクションをマージし、強(qiáng)制同期レイアウトを避けることです。

DOM訪問數(shù)を減らします

DOM操作は、特にoffsetWidthやgetBoundingClientRect()などの屬性を読み取る場合、通常のJS変數(shù)操作よりもはるかに遅くなります。このタイプの「読み取り」操作は、ブラウザにスタイルをすぐに計(jì)算するように強(qiáng)制され、強(qiáng)制同期レイアウトが発生します。

提案されたプラクティス：

• 何度も読み、1回だけ読む必要がある値をキャッシュします。
• DOMから繰り返し取得するのではなく、JSの変數(shù)で狀態(tài)を保存してみてください。
• バッチの読み取りと書き込み：最初にすべてのデータを読み取り、次に論理処理を?qū)g行し、最後にDOMに均一に書き込みます。

例えば：

 const elements = document.queryselectorall（ '。アイテム'）;
TotalHeight = 0とします。

Elements.Foreach（el => {
  totalheight = el.offsetheight; // 1回のみ読み取る}）;

頻繁な再配置を避けるために、DOMの変更をマージします

DOMが変更されるたびに、再注文がトリガーされる場合があります。 5回連続して変更されている場合、ブラウザは5回の再注文を?qū)g行できます。しかし、実際には、最後の結(jié)果のみが必要です。

最適化方法：

• ドキュメントフラグメント（DocumentFragment）を使用して、ノードをバッチにします。
• 要素を非表示にしてから操作し、完了後に表示します。
• Virtual DomまたはFrameworks（Reactなど）を使用して、自動的に差動更新を作成します。

例えば：

 const fragment = document.createdocumentfragment（）;
for（let i = 0; i <100; i）{
  const div = document.createelement（ &#39;div&#39;）;
  div.textContent = &#39;item&#39; i;
  fragment.appendChild（div）;
}
document.body.appendChild（fragment）; //並べ替えは一度だけトリガーされます

レイアウトジッター（レイアウトスラッシング）を避ける

いわゆるレイアウトジッターは、domプロパティをループ內(nèi)で継続的に読み取り、書き込み、ブラウザを繰り返し再配置することです。

一般的なエラー作成方法：

 for（i = 0; i <items.length; i）{
  items [i] .style.width = container.offsetwidth &#39;px&#39;; //すべての読み取りを強(qiáng)制します}

最適化方法：

• 最初にoffsetWidthを読んでキャッシュします。
• すべての書き込み操作は中央に処理されます。

最新のツールと非同期更新戦略を使用します

ほとんどのフロントエンドフレームワークには、Reactの和解やVueのレスポンシブシステムなど、パフォーマンス最適化メカニズムが組み込まれています。

同様のロジックを自分で実裝する場合、 requestAnimationFrameを使用して更新リズムを制御するか、アンチシェイクスロットルを使用して高周波イベント（サイズ、スクロールなど）のDOM動作周波數(shù)を制御できます。

一般に、ゆっくりとしたDOM操作は、主に再配置と再描畫のコストが高く、アクセス効率が低いためです。 「読み取りと書き込みが少なく、操作のマージ、更新の遅延」を達(dá)成する限り、パフォーマンスを効果的に改善できます。これらの手法は必ずしも複雑ではありませんが、非常に実用的です。

以上がなぜDOMの操作が遅く、どのように最適化できるのですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。