前端知识体系-JS相关虚拟DOM和Diff算法
Posted fecommunity
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端知识体系-JS相关虚拟DOM和Diff算法相关的知识,希望对你有一定的参考价值。
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的差异)
以上是关于前端知识体系-JS相关虚拟DOM和Diff算法的主要内容,如果未能解决你的问题,请参考以下文章