【前端知識體系-JS相關】虛擬DOM和Diff演算法

1.介紹一下vdom?

1. virtual dom， 虛擬DOM
2. 使用JS來模擬DOM結構
3. DOM變化的對比，放在JS層來做（圖靈完備語言），提高效率
4. DOM操作非常昂貴（消耗性能）

2.Snabbdom的使用

var snabbdom = window.snabbdom;
// 定義patch
var patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
])

// 定義h
var h = snabbdom.h;

var container = document.getElementById('container');
// 生成vnode
var vnode = h('ul#list', {}, [
    h('li.item', {}, 'Item 1'),
    h('li.item', {}, 'Item 2'),
]);

patch(container, vnode)


// 修改DOM內容
document.getElementById('btn-change').addEventListener('click', function () {
    // 生成newVnode
    var newVnode = h('ul#list', {}, [
        h('li.item', {}, 'Item 1'),
        // DOM節點中不同的地方
        h('li.item', {}, 'Item B'),
        h('li.item', {}, 'Item 3'),
    ]);
    patch(vnode, newVnode)
})

[!NOTE]
核心API總結：

1. h('<標簽名稱>', { 屬性 }, [子元素])
2. h('<標簽名>', {屬性}， ‘...’)
3. patch(container, vnode)
4. patch(vnode, newNode)

3.介紹一下diff演算法?

3.1 Diff演算法是什麼

1. Linux中： diff 文件1.txt 文件2.txt
2. Git中： git diff
3. 線上比對工具

3.2 去繁就簡

1. diff演算法實現非常複雜，實現難度很大，源碼量很大
2. 去繁就簡，講明白核心流程，不關心細節（非常高效的手段）
3. 面試官也大部分不清楚細節，但是很關係核心流程的實現

3.3 VDOM為何使用diff演算法？

1. DOM操作是昂貴的，因此要儘量減少DOM的操作
2. 找出本次DOM必須更新的節點來更新，其他的不更新
3. 這個找出的過程，就需要使用diff演算法（找出兩個虛擬DOM的差異）