什麼是虛擬dom virtual dom

我一直在思考， 寫部落格是為了什麼？終於有一天我想明白了: 思考， 表達， 交友。

用js模擬dom結構。

dom發生變化的對比，放在js層做。

提高重繪的效能

js是圖靈完備語言，能實現各種邏輯和演算法的語言。

dom操作是非常昂貴的

js的執行效率是非常高的

jquery 中操作dom的渲染案例:

var $idbtn =$(

'.id-btn');
function
render
(data)$$
`))}
) $container.
($table)
} $idbtn.
click
(function()
)render
(data)

vue 和 vdom 是借用了snabbdom來實現的。

github:

下面介紹一下snabbdom的簡單使用

引入snabbdom的js檔案

初始化snabbdom的patch和h函式

建立虛擬vdom

第一次把vdom渲染到頁面

建立新的vdom，newvdom

然後把newvdom和vdom進行對比

最後只改變修改的dom

**如下:

="container"
>
<
/div>
"button" name=
"button"
class
="btn"
>change<
/button>
"">
<
/script>
"">
<
/script>
"">
<
/script>
"">
<
/script>
"">
<
/script>
"">
<
/script>
var container = document.
queryselector
('.container'
)var btn = document.
queryselector
('.btn'
)var patch = snabbdom.
init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])var h = snabbdom.h
var vdom =h(
'ul#list',,
[h('li.item',,
'item1'),
h('li.item',,
'item2')]
)patch
(container, vdom)
btn.
addeventlistener
('click'
,function()
,[h(
'li.item',,
'item1'),
h('li.item',,
'itemb'),
h('li.item',,
'item3')]
)patch
(vdom, newvdom)})
<
/script>
<
/body>

1、什麼是diff演算法？

diff 演算法是用來對比兩個檔案有**不同的，是linux的以及基礎的命令。

dom操作是昂貴的

找本次修改的dom，其他的節點不動

找出的過程就是diff演算法

3、diff演算法核心流程？

如何用vnode生成乙個dom的節點？

patch方法

patch(container, vnode)

patch(vnode, newvnode)

vnode和newvnode的對比

修改改變的dom節點

replacechildren

createelement

什麼是虛擬dom

虛擬dom就是乙個特殊的物件。vue之所以執行高效，因為採用了虛擬dom，減少了對真實的dom操作。一 dom和虛擬dom對比 dom 二 dom操作和虛擬dom操作耗時對比 let num 0 console.time test 方式一 平均 60ms 80ms for var i 0 i 100...

什麼是桌面虛擬化

桌面虛擬化是指將計算機的桌面進行虛擬化，以達到桌面使用的安全性和靈活性。可以通過任何裝置，在任何地點，任何時間訪問在網路上的屬於我們個人的桌面系統。桌面虛擬化概念 計算機虛擬化技術當前主要包括伺服器虛擬化 應用虛擬化 桌面虛擬化。目前網路虛擬化，顯示卡虛擬化 也稱gpu虛擬化 等技術都在快速發展，在...

什麼是虛擬化技術？

什麼是虛擬化技術？這是個廣而範的問題，今天我就以我自己的見解給大家談談虛擬化技術。關於虛擬化，這些年來被炒的沸沸揚揚，其實簡單用一句話來概括來說，虛擬化就是模擬實際的硬體環境或者共享硬體環境。虛擬化計算機的本質 虛擬化，原本是指資源的抽象化，也就是單一物理資源的多個邏輯表示，或者多個物理資源的單一邏...