JS基础知识2.0(四)虚拟DOM
Virtual dom
vdom是 vue和react 的核心,哪个都绕不开它,vdom比较独立。使用也比较简单。
问题:
1.vdom是什么?为何会存在vdom?
2.vdom如何应用,核心api是什么?
3.介绍一下diff算法
知识点:
1.vdom是什么,为何使用vdom
virtual dom,虚拟dom
用JS模拟DOM结构
DOM变化的对比,放在JS层来做(图灵完备语言(能实现逻辑复杂性语言))
DOM操作很昂贵。
设计一个需求场景
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
<script type="text/javascript">
var data = [
{
name: '张三',
age: '20',
address: '北京'
},
{
name: '李四',
age: '21',
address: '北京'
},
{
name: '王五',
age: '22',
address: '北京'
}
]
//渲染函数
function render (data) {
var $container = $('#container')
// 清空容器
$container.html('')
// 拼接 table
var $table = $('<table>')
$table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
data.forEach(function (item) {
$table.append($('<tr><td>'+ item.name +'</td><td>'+ item.age +'</td><td>'+ item.address +'</td></tr>'))
})
//渲染到页面
$container.append($table)
}
$('#btn-change').click(function () {
data[1].age = 30
data[2].address = '深圳'
//re-render 再次渲染
render(data)
})
//页面加载完 立刻执行 (初次渲染)
render(data)
</script>
将dom放在最后面就是最后渲染一次,如果放在var table...下面,就是渲染5次
默认创建dom节点属性很多,js模拟更简单点 尽量减少dom操作
总结:
dom操作是昂贵的,JS运行效率高
尽量减少DOM操作,而不是“推倒重来”
项目越复杂,影响就越严重
vdom即可解决这个问题
2.vdom的如何应用,核心API是什么
介绍snabbdom,开源vdom库
h函数,patch函数
建立一个div id为container, 有两个class two,classes 后面是属性,onclick somFn
H 定义一个节点
空的dom节点,把vnode全放到dom节点里
第二次 对比两个vnode的不同,把不同的更新
核心API
H(‘<标签名>’, {..属性.}, [..子元素.])
H(‘<标签名>’, {..属性.}, ‘..’)
Patch(container, vnode)
Patch(vnode,newVnode)
3.介绍一下diff算法
什么是diff算法
去繁就简
diff算法非常复杂,实现难度很大,源码量很大
去繁就简,讲明白核心流程,不关心细节
vdom为何使用dff算法
dom操作是昂贵的,因此尽量减少DOM操作
找出本次DOM必须更新的节点来更新,其他的不更新
这个找出的过程,就需要DIFF算法
diff实现过程
Patch(container,vnode)
Patch(vnode,newVnode)
不仅仅是以上内容
节点新增和删除
节点重新排序
节点属性,样式,事件绑定
如何极致压榨性能
。。。
diff实现过程
Patch(container,vnode) createElement
Patch(vnode,newVnode) updateChildren
总结:
vdom是什么?为何会存在vdom?
vdom如何应用,核心API是什么
介绍一下diff算法
1.virtual dom,虚拟DOM
2.用JS模拟DOM结构
3.DOM操作非常昂贵
4.讲DOM对比操作放在JS层,提高效率
(i)如何使用?可用snabbdom的用法来举例
(ii)核心api:h函数,patch函数
A.是linux的基础命令
B.vdom中应用diff算法是为了找出需要更新的节点
C.实现过程patch(container,vnode) patch(vnode,newVnode)
D.核心逻辑 createElement 和updateChildren