深入理解 DOM
什麼是 DOM？
DOM（文件物件模型）是一種樹狀節點結構，其中每個節點代表文件的一部分。
當我們打開瀏覽器控制台時，我們可以看到我們造訪的網站的 HTML。實際上，HTML 以文字流的形式傳遞給瀏覽器，然後透過以下方式建立 DOM：
-
使用 HTML 解析器解析 HTML
-
將 HTML 標籤轉換為元素節點
-
將文字轉換為文字節點
在瀏覽器中建立 DOM 流
文字流
==> 檢查<script>標籤（如果找到，先執行腳本）
==> HTML 解析器轉換文本
==> HTML 標籤轉換為節點
==> 建置 DOM 樹
圖 1：瀏覽器中 DOM 的建置流程
與 JavaScript 的關係
-
DOM 不是 JavaScript 的一部分。
-
它是瀏覽器提供的 Web API，允許 JavaScript 與網站進行互動和操作。
與虛擬 DOM 的區別
-
React 中使用了虛擬 DOM。
-
它是真實 DOM 樹的輕量級表示。
-
本質上，它是 UI 的 JavaScript 物件表示。
-
當 React 中發生事件時：
-
建立一個新的虛擬 DOM
-
使用 diffing 與舊版本進行比較
-
使用協調演算法發現差異，並且只有這些部分在真實 DOM 中更新
圖 2：React 中真實 DOM 與虛擬 DOM 的更新
結論
DOM 是瀏覽器渲染網頁以及與網頁互動的基礎。它提供了一種樹狀結構，JavaScript 可以對其進行操作，使網站更具動態性和互動性。然而，對於大型或頻繁更新的應用程式來說，直接使用真實的 DOM 可能會很慢且效率低下。
這就是虛擬 DOM 的作用所在。透過在記憶體中保留真實 DOM 的輕量級副本，React 可以有效地確定需要更改的內容並僅更新這些部分，從而實現更快、更流暢的效能。
理解 DOM 和虛擬 DOM 對每個現代 Web 開發者都至關重要。掌握這些知識後，你將更清楚地了解瀏覽器的底層運作原理，以及像 React 這樣的框架如何優化 UI 更新。
💡 你呢？你在直接操作 DOM 時遇到過效能問題嗎？還是你喜歡使用像 React 這樣可以處理虛擬 DOM 的框架？請在評論區分享你的想法！
原文出處：https://dev.to/asim786521/the-hidden-world-of-the-dom-virtual-dom-explained-simply-12a3
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
