在說Virtual-DOM之前，我們來先說下什麼是DOM，DOM從字面上來理解是文件物件模型。 W3C對DOM的定義是：“一個與系統平臺和程式語言無關的介面，程式和指令碼可以通過這個介面動態地訪問和修改文件

時至今日，前端對於知識的考量是越來越有水平了，逼格高大上了 各類框架大家已經可以說無論是工作還是日常中都已經或多或少的使用過了 曾經聽說很多人被問到過虛擬DOM和DOM-diff演算法是如何實現的，有沒

概述 本文通過對virtual-dom 的原始碼進行閱讀和分析，針對Virtual DOM的結構和相關的Diff演算法進行講解，讓讀者能夠對整個資料結構以及相關的Diff演算法有一定的瞭解。

承接上文，假如我給你一個virtual DOM物件，那麼你該如何實現將它渲染到真實的文件中去呢？這個時候就涉及到原生DOM介面的一些增刪改查的知識點了： // 增：根據標籤名，建立一個元素節點（elem

一、前言 如果不瞭解virtual dom，要理解diff的過程是比較困難的。 虛擬dom對應的是真實dom， 使用 document.CreateElement 和  document.Create

如果你的應用有接入到web apm系統中，那麼你可能就知道apm系統能幫你捕獲到頁面發生的未捕獲錯誤，給出錯誤棧，幫助你定位到BUG。但是，有些時候，當你不知道使用者的具體操作時，是沒有辦法重現這個錯誤的，這時

實現虛擬(Virtual) Dom 把一個 div 元素的屬性打印出來，如下： 可以看到僅僅是第一層，真正 DOM 的元素是非常龐大的，這也是 DOM 載入慢的原因。 相對於

在未出現雙向繫結之前，我們需要在各個觸發事件方法中直接操作DOM節點來達到修改相應檢視的目的。但是當應用一大就會變得難以維護，reflow(迴流)很影響效能的。 因此就有人提出來，那我們是不是可以把真實DO

編者按：本文作者 Berwin，W3C效能工作組成員，360導航高階前端工程師。Vue.js早期使用者，《深入淺出Vue.js》（正在出版）作者。 最近看到一篇國外的文章，說現代JS框架存在的根本原因是保持