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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
Vue实现自定义下拉菜单功能
Jul 16 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python3多线程知识点总结
2019/09/26 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Python如何输出百分比
2020/07/31 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
weblogic面试题
2016/03/07 面试题
.NET方向面试题
2014/11/20 面试题
跟单业务员岗位职责
2014/03/08 职场文书
司法局火灾防控方案
2014/06/05 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
python 实现图片特效处理
2022/04/03 Python