【前端知識體系-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的差別）