虛擬DOM操作

2021-10-04 07:50:30 字數 790 閱讀 2054

什麼是虛擬dom

虛擬dom的設計思想

(1)提供一種方便的工具,使得開發效率得到保障

(2)保證最小化的dom操作,使得執行效率得到保障

-也就是說,虛擬dom的框架/工具都是這麼做的:

1.根據虛擬dom樹最初渲染成真實dom

2.當資料變化,或者說是頁面需要重新渲染的時候,會重新生成乙個新的完整的虛擬dom

3.拿新的虛擬dom來和舊的虛擬dom做對比(diff演算法)。得到需要更新的地方之後,更新內容

虛擬dom中,在dom的狀態發生變化時,虛擬dom會進行diff運算,來更新只需要被替換的dom,而不是全部重繪。

在diff演算法中,只平層的比較前後兩棵dom樹的節點,沒有進行深度的遍歷。

1.如果節點型別改變,直接將舊節點解除安裝,替換為新節點,舊節點包括下面的子節點都將被解除安裝,如果新節點和舊節點僅僅是型別不同,但下面的所有子節點都一樣時,這樣做也是效率不高的乙個地方。

2.節點型別不變,屬性或者屬性值改變,不會解除安裝節點,執行節點更新的操作。

3.文字改變,直接修改文字內容。

4.移動,增加,刪除子節點時:

如果想在中間插入節點f,簡單粗暴的做法是:解除安裝c,裝載f,解除安裝d,裝載c,解除安裝e,裝載d,裝載e。如下圖:

虛擬dom 虛擬 DOM 和 DOM diff

乙個能代表dom樹的物件,通常含有標籤名 標籤上的屬性 事件監聽和子元素及其它屬性。虛擬dom在vue和react中的示例 const rnode classname red 標籤上的屬性 onclick 事件 ref null,type div 標籤名 or 元件名 const vnode 事件 ...

虛擬DOM跟js操作dom的簡單區別

1.用html分析器,分析html元素,建立一顆dom樹 2.用css分析器,分析css樣式,生成頁面的樣式表 3.將樣式表和dom數關聯起來,構建成乙個render 渲染 樹,每乙個dom節點都有attach 固定 方法來接受各自的樣式,最後集中成一棵render 渲染 樹 4.有了render ...

虛擬DOM也是操作DOM,為什麼說它快?

虛擬dom 不會進行排版和重繪操作。虛擬dom 進行頻繁修改,然後一次性比較並修改真實dom 中需要改的部分,最後在真實dom 中進行排版與重繪,減少過多dom節點排版與重繪損耗 真實dom 頻繁排版與重繪的效率是相當低的 虛擬dom有效降低大面積 真實dom節點 的重繪月排版,因為最終與真實dom...