用jQuery实现
遇到的问题
- DOM 操作是“昂贵”的,js 运行效率高
- 尽量减少 DOM 操作,而不是“推倒重来”
- 项目越复杂,影响就越严重
- vdom 即可解决这个问题
三、vdom 的如何应用,核心 API 是什么
什么是 vdom
介绍 snabbdom
介绍 snabbdom - h 函数
介绍 snabbdom - patch 函数
重做jQuery的demo
- 使用
data
生成vnode
- 第一次渲染,将
vnode
渲染到#container
中 - 并将
vnode
缓存下来 - 修改
data
之后,用新data
生成newVnode
- 将
vnode
和newVnode
对比
核心 API
h(‘<标签名>’, {…属性…}, […子元素…]) h(‘<标签名>’, {…属性…}, ‘….’) patch(container, vnode) patch(vnode, newVnode)
四、介绍一下 diff 算法
4.1 vdom 为何使用 diff 算法
- DOM 操作是“昂贵”的,因此尽量减少 DOM 操作
- 找出本次 DOM 必须更新的节点来更新,其他的不更新
- 这个“找出”的过程,就需要 diff 算法
patch(container, vnode)
演示过程
以上所述就是小编给大家介绍的《虚拟DOM(一)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- VMware虚拟机嵌套部署KVM虚拟机指南
- 虚拟化生态系统及实现从虚拟化走向云端
- 如何探测虚拟化环境是物理机、虚拟机还是容器?
- 如何探测虚拟化环境是物理机、虚拟机还是容器?
- 【Java虚拟机规范】Java虚拟机结构:运行时数据区
- 像虚拟机一样虚拟数据,开源项目Alluxio要发力中国市场
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Tango with Django
David Maxwell、Leif Azzopardi / Leanpub / 2016-11-12 / USD 19.00
Tango with Django is a beginner's guide to web development using the Python programming language and the popular Django web framework. The book is written in a clear and friendly style teaching you th......一起来看看 《Tango with Django》 这本书的介绍吧!