虛擬DOM理解筆記

2021-10-08 17:48:47 字數 512 閱讀 6096

dom:

瀏覽器中提供的概念,用js物件,表示頁面上的元素,並提供一些操作元素的api

虛擬dom:

是框架中的概念,使用js物件來模擬dom元素和巢狀關係,虛擬dom是以js物件的形式存在的

本質:用js物件,來模擬dom元素和巢狀關係

目的:為了實現頁面元素的高效更新

diff演算法:

* tree diff

新舊兩棵dom樹逐層對比的過程,當整棵dom逐層對比完畢,則所有需要被按需更新的元素,必然能夠找到

* component diff

在進行tree diff的時候,每一層中元件級別的對比,

-如果對比前後,元件中的型別相同,則暫時認為此元件不需要更新,

-如果前後對比,元件型別不同,則需要移除就元件,建立新元件,並追加到頁面上

* element diff

在進行component diff的時候,如果兩個元件型別相同,則需要進行元素級別的對比

如何理解虛擬DOM

看了知乎各位大神對於虛擬dom的解釋,我也是得出了一些比較淺顯的感受 虛擬dom virtual dom並沒有完全實現dom,virtual dom最主要的還是保留了element之間的層次關係和一些基本屬性。我認為虛擬dom就是把dom樹做了乙個 dom 資料 對映成虛擬dom,這個對映的效率比操...

虛擬DOM淺理解

虛擬dom往簡單了說就是用一種簡便的方法去實現對dom元素的操作。為什麼要用 就是為了要解決瀏覽器的效能問題 好處 頁面的更新可以先全部反映在js物件 虛擬dom 上,操作記憶體中的js物件的速度顯然要更 快,等更新完成後,再將最終的js物件對映成真實的dom,交由瀏覽器去繪製。實現過程 可以通過e...

虛擬dom的具體理解

下面來說下,我理解的虛擬dom 背景 我們知道在jquery時代,都是直接操作dom的,你需要在適當的時機以正確的順序來制定要更改的元素,相當於我們自己要時時刻刻看著dom,然後告訴它你頭要怎麼放,手要擺怎麼樣的姿勢。所以問題來了,你為什麼不一次性告訴dom你想要的結果呢?而且另外乙個常識問題就是操...