虛擬DOM淺理解

2021-09-26 04:59:30 字數 597 閱讀 2312

虛擬dom往簡單了說就是用一種簡便的方法去實現對dom元素的操作。

為什麼要用:就是為了要解決瀏覽器的效能問題

好處:頁面的更新可以先全部反映在js物件(虛擬dom)上,操作記憶體中的js物件的速度顯然要更    快,等更新完成後,再將最終的js物件對映成真實的dom,交由瀏覽器去繪製。

實現過程:可以通過element方法可以用來建立虛擬dom

element實現步驟:

對元素依次進行型別判斷,不同型別的進行不同的操作,直至全部都建立完成

判斷兩棵dom樹之間的差異需要用到dom diff演算法

dom diff是深度優先遍歷來記錄差異的

將虛擬dom渲染為真實的dom元素需要把diff結果通過dom fragment更新到瀏覽器dom中。

虛擬dom的真正意義是為了實現跨平台,服務端渲染,以及提供乙個效能還算不錯 dom 更新策略。虛擬dom讓整個 mvvm 框架靈活了起來。

[通過diff演算法可以統一計算出所有的變化之後進行一次性的更新(用到了js的dom fragment來操作dom)]

如何理解虛擬DOM

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

虛擬DOM理解筆記

dom 瀏覽器中提供的概念,用js物件,表示頁面上的元素,並提供一些操作元素的api 虛擬dom 是框架中的概念,使用js物件來模擬dom元素和巢狀關係,虛擬dom是以js物件的形式存在的 本質 用js物件,來模擬dom元素和巢狀關係 目的 為了實現頁面元素的高效更新 diff演算法 tree di...

虛擬dom的具體理解

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