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 相关文章推荐
js 回车提交表单两种实现方法
Dec 31 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
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短址转换实现方法
2015/02/25 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php异常处理捕获错误整理
2019/09/23 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
班组长岗位职责
2014/03/03 职场文书
青年志愿者活动总结
2014/04/26 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年电厂工作总结
2014/12/04 职场文书
经典导游欢迎词
2015/01/26 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
基层工作经历证明
2015/06/19 职场文书
旅行社计调工作总结
2015/08/12 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle