ホームページ > 記事 > ウェブフロントエンド > Virtual DOM を使用する理由: レンダリングとパフォーマンス
Virtual DOM を使用する理由: レンダリングとパフォーマンス
- Linda Hamiltonオリジナル
- 2024-11-03 14:11:30714ブラウズ
この記事では、dom と仮想 dom とは何なのかを詳しく調べます。
DOM (ドキュメント オブジェクト モデル) とは何ですか?
Web ページがブラウザに読み込まれると、ブラウザは HTML を生成して、要求されたページを に表示します。この HTML 構造は ツリー に似ています。 DOM は、Web ドキュメント (HTML または XML) のコンテンツをブラウザーがオブジェクト指向構造に変換した結果として形成されます。この構造のおかげで、ページのコンテンツはブラウザではツリー構造に編成され、各HTMLタグまたはコンテンツは「ノード」として表されます。
次に、ドキュメント オブジェクト モデルを調べます :
ドキュメント オブジェクトにアクセスするサンプル コードを書いてみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document object model</title>
</head>
<body>
<div class="card" style="width: 18rem;">
<img class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem, ipsum dolor.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
<a href="#" class="btn btn-primary">Lorem, ipsum.</a>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
console.log(document)
出力 :
console.log(document) を使用して dom にアクセスできます。 Document オブジェクト を調べると、このオブジェクトが HTML ドキュメントを表していることがわかります。つまり、ドキュメント オブジェクトには、HTML ドキュメント.
内のすべてのタグが含まれています。JavaScript を使用すると、ドキュメント オブジェクト内のタグにアクセスし、この ドキュメント オブジェクト 内のタグを操作して動的な Web ページを作成できます。にアクセスする方法の例を示します:
const wrapper = document.getElementById("card")
console.log(wrapper)
出力:
仮想DOMとは何ですか?
DOM を変更する (「HTML を変更する」) 最も簡単な方法は、要素内の innerHTML プロパティを変更することであることがわかりました。この HTML 変更方法は、DOM 再描画 (" ユーザーに表示される内容の更新 ") では パフォーマンス が良くありません。これは、innerHTML が原因です。文字列から DOM ノードを解析し、前処理して追加する必要があります。 Web ページに HTML の変更が多すぎると、パフォーマンスの問題が発生します。
では、パフォーマンスの問題はどのように修正されたのでしょうか?
この問題は、仮想 DOM を作成することで修正されました。 仮想 DOM は、メモリに保存されている 実際の DOM のコピーです。ユーザーが Web ページを操作し、Web ページの状態が更新されると、新しい 仮想 DOM がメモリ内に作成されます。この新しい仮想 DOM は以前の 仮想 DOM と比較されて変更が特定され、これらの変更は 実際の DOM に適用されてユーザーに表示されます。
これは、使用する最新のライブラリの動作ロジックであり、比較のために dif アルゴリズム を使用します。それらはすべて 仮想 DOM を使用します。ただし、仮想 DOM アプローチは高速ですが、パフォーマンスに関して考慮する必要がある点があります。仮想ドメインを変更すると、Web ページ全体がレンダリングされます。 ライブラリには、パフォーマンスの最適化のための フック
があります。結論
この記事では、dom と 仮想 DOM が何なのかを調べました。仮想 dom が使用される理由がわかりました。これで、dom と仮想 dom が何であるかがわかりました。
以上がVirtual DOM を使用する理由: レンダリングとパフォーマンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。