虛擬DOM和 Diff演算法

1、用js來模擬dom中的節點。傳說中的虛擬dom。

虛擬dom實現過程：

1.根據真實dom產生虛擬dom? 虛擬dom?就是乙個特殊物件（經過一些處理能產生真實dom）

2.進行編譯解析

3.將虛擬dom 變成真實dom 也就 掛載

4.資料發生變化 產生新的虛擬dom

5、將資料變化後的虛擬dom 和之前的虛擬dom 通過differ 演算法 進行比對

6、比對之後更新檢視 一樣的不變 不一樣重新渲染

<

!doctype html>
"en"
>
"utf-8"
>
虛擬dom<
/title>
<
/head>
'test'
>
<
/span>
'test'
>
='hehe'
>這裡是p標籤<
/p>
}<
/li>
<
/ul>
<
/body>
//虛擬dom實現過程：
// 1.根據真實dom產生虛擬dom?  虛擬dom?就是乙個特殊物件（經過一些處理能產生真實dom）
let vdom=
,    content:[,
content:
'這裡是p標籤'},
]}// 2.進行編譯解析
let vdom=
,    content:[,
content:
'這裡是p標籤'},
]}//3.將虛擬dom 變成真實dom 也就 掛載
//4.資料發生變化 產生新的虛擬dom
let vdom=
,    content:[,
content:
'這裡是p標籤'},
,]}//5、將資料變化後的虛擬dom 和之前的虛擬dom 通過differ 演算法 進行比對
// 6、比對之後更新檢視 一樣的不變 不一樣重新渲染
<
/script>
<
/html>

1.1、 diff演算法就是進行虛擬節點對比，並返回乙個patch物件，用來儲存兩個節點不同的地方，最後用patch記錄的訊息去區域性更新dom。

如圖所示：

1.2、比較只會在同層級進行, 不會跨層級比較。比較後會出現四種情況：

1、此節點是否被移除 -> 新增新的節點

2、屬性是否被改變 -> 舊屬性改為新屬性

3、文字內容被改變-> 舊內容改為新內容

4、節點要被整個替換 -> 結構完全不相同 移除整個替換

同級比較就是對比上方的數字，把不同的放入陣列中，然後用patch函式進行比較渲染。

2、diff的過程就是呼叫名為patch的函式，比較新舊節點，一邊比較一邊給真實的dom打補丁

虛擬DOM和Diff演算法

虛擬dom其實就是在真實dom之前加了一層js物件生成的dom 用js物件模擬dom 把這個虛擬dom物件轉為真實的dom插入到頁面中 如果有事件修改了虛擬dom，比較兩個虛擬dom樹的差異，得到差異物件 補丁 把差異物件應用到正則的dom樹上 比較同級的節點 同一父節點的子節點 當發現節點已經不存...

虛擬DOM和diff演算法

虛擬dom virtual dom 也就是我們常說的虛擬節點，它是通過js的object物件模擬dom中的節點，然後再通過特定的render方法將其渲染成真實的dom的節點。為什麼要使用虛擬dom呢，因為操作真實dom的耗費的效能代價太高，頻繁的操作dom，會大量的造成頁面的重繪和回流，出於效能優化...

React 虛擬 Dom 和 diff 演算法

react將dom抽象為虛擬dom,然後通過新舊虛擬dom 這兩個物件的差異 diff演算法 最終只把變化的部分重新渲染,提高渲染效率的過程 概念講完再描述一遍 一句話 用 js 物件的形式,來表現一棵真是的 dom 樹 傳統的 diff 演算法也是一直都有的 react 通過制定大膽的策略，將 o...