【前端知识体系-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的差别）