在 HTML 中 DOM（文檔對象模型）是 Web 前端里最基礎、最常用的—模型。例如，一個網頁其實就是一個 HTML 文件，經過瀏覽器的解析，最終呈現在用戶面前。
所以，瀏覽器在解析 HTML 文檔時，會把每個標簽抽象成代碼里的對象，按照這種層次分明的結構組織，這就是 DOM。
如下圖所示為數據結構里典型的“樹”結構。程序員經常說的 DOM 樹，其實就是這個意思。瀏覽器在解析 HTML 時，會在它的內部構建這樣一棵 DOM 樹，然后按照這棵樹上的層次順序解析每個標簽。解析完成后，用戶就看到了網頁的內容。
瀏覽器解析完 HTML，就要開始解析 HTML 里的 JavaScript 代碼。程序員可以通過 JavaScript 代碼實現一些動態的網頁效果。例如，從服務器拉取一段數據來展示，或做一個酷炫的動畫效果，都要用到 DOM。
出一個 loading 圖標的轉圈動畫，只有等 JavaScript 從服務器上請求到真正的數據后操縱 DOM 來顯示數據，才能看到內容，這就是典型的異步加載。
以 HTML 5 的游戲為例，里面的人物要隨着手指或鼠標運動，普遍的做法是通過 JavaScript 操縱 DOM 改變元素的位置來實現。可以說，DOM 使得 JavaScript 在前端世界里幾乎無所不能。
但是，有一點要注意，操縱 DOM 本身是一件效率非常低的事情。一個網頁往往很復雜，瀏覽器構造出來的 DOM 樹往往很龐大，有的甚至有幾千個節點。
在這么龐大的一棵樹上頻繁地改動，對瀏覽器（尤其是移動瀏覽器）來說是不小的工作量，稍不注意就會出現卡頓。
於是，有人發明了一種便捷的方法，叫作虛擬 DOM。
簡單來說，就是用 JavaScript 模擬了一棵簡單的 DOM 樹，然后在這上面演練所有的 DOM 操作，等時機成熟時再把虛擬 DOM樹和真正的瀏覽器的 DOM 樹做對比，算出差異，一次性地改變真正的 DOM 樹。
這兩個步驟從整體上大大提高了 JavaScript 操縱 DOM 樹的效率。