【前端知识体系-JS相关】虚拟DOM和Diff算法
程序员文章站
2022-05-22 20:07:45
介绍一下vdom?Snabbdom是虚拟DOM实现的一个基础库,通过该库可以构建一个虚拟DOM树,并高效地完成数据的同步和更新。 ......
1.介绍一下vdom?
- virtual dom, 虚拟dom
- 使用js来模拟dom结构
- dom变化的对比,放在js层来做(图灵完备语言),提高效率
- 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总结:
- h('', { 属性 }, [子元素])标签名称>
- h('', {属性}, ‘...’)标签名>
- patch(container, vnode)
- patch(vnode, newnode)
3.介绍一下diff算法?
3.1 diff算法是什么
- linux中: diff 文件1.txt 文件2.txt
- git中: git diff
- 在线比对工具
3.2 去繁就简
- diff算法实现非常复杂,实现难度很大,源码量很大
- 去繁就简,讲明白核心流程,不关心细节(非常高效的手段)
- 面试官也大部分不清楚细节,但是很关系核心流程的实现
3.3 vdom为何使用diff算法?
- dom操作是昂贵的,因此要尽量减少dom的操作
- 找出本次dom必须更新的节点来更新,其他的不更新
- 这个找出的过程,就需要使用diff算法(找出两个虚拟dom的差异)
下一篇: 风向