這是專門探索 JavaScript 及其所構建的組件的系列文章的第 17 篇。 如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是如何工作的：引擎，運行時和調用堆棧的概述！ JavaScript 是如何工作的：深入V8引擎&編寫優化代碼的5個技巧 ...

在Web開發中，需要將數據的變化實時反映到UI上，這時就需要對DOM進行操作，但是復雜或頻繁的DOM操作通常是性能瓶頸產生的原因，為此，React引入了虛擬DOM（Virtual DOM）的機制。 什么是虛擬DOM？ 虛擬DOM VS 直接操作 ...

虛擬 DOM 的實現原理主要包括以下 3 部分： 用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象； diff 算法 — 比較兩棵虛擬 DOM 樹的差異； pach 算法 — 將兩個虛擬 DOM 對象的差異應用到真正的 DOM 樹。 ...

Virual DOM是用JS對象記錄一個dom節點的副本，當dom發生更改時候，先用虛擬dom進行diff，算出最小差異，然后再修改真實dom。 vue的virtual dom的diff算法是基於snabbdom算法改造而來，與react的diff算法一樣僅在同級的vnode間做diff，遞歸 ...

解釋清楚DOM原理並不是一件容易的事，但是任何一個前端工程師，都必須牢牢掌握它。 DOM整體架構： 圖解: DOM，即針對XML文檔的應用程序編程接口(API).通俗一點說，HTML屬於XML的一種，先將HTML映射成節點樹，然后對節點樹提供一套增刪改查的方法 ...

在開發中使用了vue之后，會感受到vue比jquery高效不少，一個指令可以省略不少代碼，但當學習和使用了react之后感覺更有趣的也出現了，就是喜歡上了比較vue和react的異同。今天就簡單談談兩者的部分差異。 首先，除了react使用虛擬DOM一大亮點外，我們先從直觀的地方比較下兩者的差異 ...

### 什么是虛擬DOM #### 數據變化頁面同步渲染的邏輯，這里分析三種邏輯。 1. 先有數據 （state） 2. 模版（render中的jsx） 3. 數據 + 模版 = 生成真實Dom，來顯示 4. state 發生改變 ...

　　沒想到寫了個前言就受到很多朋友的支持，大家的推薦就是我最大的動力（推薦得我熱血沸騰，大家就用推薦來猛砸我吧O^-^O），謝謝大家支持。 　　其實框架開發大家都知道，不過要想寫得通俗點，我個人覺得還是挺吃力的。在本系列中，我不會很深入的去講述那些映射啊關系啊（繞得我頭都暈了，這些請大家去查看 ...