Virtual DOM を使用する理由: レンダリングとパフォーマンス-jsチュートリアル-php.cn

Virtual DOM を使用する理由: レンダリングとパフォーマンス

Linda Hamilton

リリース： 2024-11-03 14:11:30

オリジナル

712 人が閲覧しました

この記事では、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)

ログイン後にコピー

出力 :

Why Virtual DOM: Render and Performance

console.log(document) を使用して dom にアクセスできます。 Document オブジェクト を調べると、このオブジェクトが HTML ドキュメントを表していることがわかります。つまり、ドキュメントオブジェクトには、HTML ドキュメント.

内のすべてのタグが含まれています。

JavaScript を使用すると、ドキュメントオブジェクト内のタグにアクセスし、この ドキュメントオブジェクト 内のタグを操作して動的な Web ページを作成できます。にアクセスする方法の例を示します:

const wrapper = document.getElementById("card")

console.log(wrapper)

ログイン後にコピー

出力:

Why Virtual DOM: Render and Performance

仮想DOMとは何ですか?

Why Virtual DOM: Render and Performance

DOM を変更する (「HTML を変更する」) 最も簡単な方法は、要素内の innerHTML プロパティを変更することであることがわかりました。この HTML 変更方法は、DOM 再描画 (" ユーザーに表示される内容の更新 ") では パフォーマンス が良くありません。これは、innerHTML が原因です。文字列から DOM ノードを解析し、前処理して追加する必要があります。 Web ページに HTML の変更が多すぎると、パフォーマンスの問題が発生します。

では、パフォーマンスの問題はどのように修正されたのでしょうか?

この問題は、仮想 DOM を作成することで修正されました。 仮想 DOM は、メモリに保存されている 実際の DOM のコピーです。ユーザーが Web ページを操作し、Web ページの状態が更新されると、新しい 仮想 DOM がメモリ内に作成されます。この新しい仮想 DOM は以前の 仮想 DOM と比較されて変更が特定され、これらの変更は 実際の DOM に適用されてユーザーに表示されます。

これは、使用する最新のライブラリの動作ロジックであり、比較のために dif アルゴリズム を使用します。それらはすべて 仮想 DOM を使用します。ただし、仮想 DOM アプローチは高速ですが、パフォーマンスに関して考慮する必要がある点があります。仮想ドメインを変更すると、Web ページ全体がレンダリングされます。ライブラリには、パフォーマンスの最適化のための フック

があります。