Dom 和虛擬 Dom-js教程-PHP中文網

Dom 和虛擬 Dom

Susan Sarandon

發布： 2024-11-02 02:33:03

原創

610 人瀏覽過

在這篇文章中，我們將詳細研究 dom 以及什麼是虛擬 dom。

什麼是 DOM（文檔物件模型）？

當網頁載入到瀏覽器時，瀏覽器會產生** HTML** 以將要求的頁面顯示到 .這個 html 結構就像一棵樹。 DOM 是由瀏覽器將 網路文件 的內容（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)

登入後複製

輸出 :

Dom and Virtual Dom

我們可以透過console.log(document)存取dom。當我們檢查 Document 物件 時，我們知道該物件代表一個 HTML 文件。換句話說，文件物件包含 HTML 文件.

中的所有標籤

使用Javascript，我們可以存取文件物件內的標籤並操作此文件物件內的標籤來建立動態網頁。讓我們舉一個如何訪問的例子：

const wrapper = document.getElementById("card")

console.log(wrapper)

登入後複製

輸出：

Dom and Virtual Dom

什麼是虛擬 DOM？

Dom and Virtual Dom

我們現在知道更改 dom（「更改 HTML」）的最簡單方法是更改元素中的 innerHTML 屬性。這種修改 html 的方法在 DOM 重繪（「更新使用者看到的內容」）效能效果不佳。這是因為 innerHTML需要從字串中解析 DOM 節點，進行預處理並附加它。如果網頁上的 html 突變太多，就會出現效能問題。

那麼效能問題是如何解決的呢？

這個問題已透過建立虛擬 DOM 來解決。 虛擬 DOM 是儲存在記憶體中的 真實 DOM 的副本。當使用者與網頁互動且網頁狀態更新時，會在記憶體中建立新的虛擬 DOM。這個新的虛擬 DOM 與先前的 虛擬 DOM 進行比較以識別更改，並將這些更改應用於 真實 DOM 以顯示給使用者。

這是您使用的現代函式庫的工作邏輯，並使用dif演算法進行比較。他們都使用虛擬DOM。但是，儘管虛擬 DOM 方法速度很快，但在效能方面還是有一些需要考慮的地方。虛擬域的變更會呈現整個網頁庫具有用於效能最佳化的掛鉤