vue 虚拟DOM的原理


Posted in Javascript onOctober 03, 2020

为什么需要虚拟DOM?

如果对前端工作进行抽象的话,主要就是维护状态和更新视图,而更新视图和维护状态都需要DOM操作。其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性。

运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM 节点,这样就造成了很大程度上的资源浪费。

在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差。有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单。

但是聪明的程序员不可能满足于此,各种MVVM框架应运而生,有angularJS、avalon、vue.js等,MVVM使用数据双向绑定,使得我们完全不需要操作DOM了,更新了状态,视图会自动更新。更新了视图数据状态也会自动更新,可以说MVVM使得前端的开发效率大幅提升。但是其大量的事件绑定使得其在复杂场景下的执行性能堪忧,有没有一种兼顾开发效率和执行效率的方案呢?由此引入Virtual DOM(虚拟DOM)。

利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM 。

当数据发生变化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

Virtual DOM 算法

所谓的 Virtual DOM 算法。包括几个步骤:

1.用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中;

2.当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异;

3.把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存。

既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。

所谓的virtual dom,也就是虚拟节点。它通过js的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM节点 dom。diff 则是通过JS层面的计算,返回一个patch对象,即补丁对象,在通过特定的操作解析patch对象,完成页面的重新渲染。

vue 虚拟DOM的原理

比较两棵虚拟DOM树的差异

比较两棵DOM树的差异是 Virtual DOM 算法最核心的部分,这也是所谓的 Virtual DOM 的 diff 算法。

两个树的完全的 diff 算法是一个时间复杂度为 O(n^3) 的问题。但是在前端当中,你很少会跨越层级地移动DOM元素。所以 Virtual DOM 只会对同一个层级的元素进行对比:

vue 虚拟DOM的原理

上面的div只会和同一层级的div对比,第二层级的只会跟第二层级对比。这样算法复杂度就可以达到 O(n)。

在实际的代码中,会对新旧两棵树进行一个深度优先的遍历,这样每个节点都会有一个唯一的标记,如下图所示:

vue 虚拟DOM的原理

Virtual DOM 算法实现

Virtual DOM 算法得实现主要是用三个函数:element,diff,patch。然后就可以实际的进行使用,如下面代码所示:

// 1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: blue'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li')])
])

// 2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: red'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li'), el('li')])
])

// 4. 比较两棵虚拟DOM树的不同
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上应用变更
patch(root, patches)

diff算法

用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度

  • 策略一(tree diff):

Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。

  • 策略二(component diff):

拥有相同类的两个组件 生成相似的树形结构,

拥有不同类的两个组件 生成不同的树形结构。

  • 策略三(element diff):

对于同一层级的一组子节点,通过唯一id区分。

tree diff

(1)通过updateDepth对Virtual DOM树进行层级控制。
(2)对树分层比较,两棵树只对同一层次节点进行比较。如果该节点不存在时,则该节点及其子节点会被完全删除,不会再进一步比较。
(3)只需遍历一次,就能完成整棵DOM树的比较。

vue 虚拟DOM的原理

diff只简单考虑同层级的节点位置变换,如果是跨层级的话,只有创建节点和删除节点的操作。

vue 虚拟DOM的原理

如上图所示,以A为根节点的整棵树会被重新创建,而不是移动,因此官方建议不要进行DOM节点跨层级操作,可以通过CSS隐藏、显示节点,而不是真正地移除、添加DOM节点。

以上就是vue 虚拟DOM的原理的详细内容,更多关于vue 虚拟DOM的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
详解JavaScript函数对象
Nov 15 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
JS实现li标签的删除
Apr 12 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue使用video插件vue-video-player的示例
Oct 03 #Javascript
区分vue-router的hash和history模式
Oct 03 #Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 #Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 #Javascript
js通过canvas生成图片缩略图
Oct 02 #Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 #Javascript
You might like
php生成静态文件的多种方法分享
2012/07/17 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Python中分数的相关使用教程
2015/03/30 Python
Python闭包函数定义与用法分析
2018/07/20 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
用python批量移动文件
2021/01/14 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
小学校园活动策划
2014/01/30 职场文书
给学校的建议书范文
2014/05/15 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
目标责任书格式
2014/07/28 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
PHP解决高并发问题
2021/04/01 PHP
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
Element实现动态表格的示例代码
2021/08/02 Javascript