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系列(15) 函数(Functions)
Apr 12 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
ES6的新特性概览
Mar 10 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
js函数和this用法实例分析
Mar 13 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python 如何访问外围作用域中的变量
2016/09/11 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
质检员的岗位职责
2013/11/15 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
新品发布会策划方案
2014/06/08 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
七年级英语教学反思
2016/02/15 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书