Vue.js 2.0窥探之Virtual DOM到底是什么?


Posted in Javascript onFebruary 10, 2017

Virtual DOM是什么?

在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。 若想了解它是如何工作的,就要先认清这几个概念:

1.更新DOM是非常昂贵的操作

当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如:

document.getElementById('myId').appendChild(myNewNode);

在现代的应用中,会有成千上万数量个DOM节点。所以因更新的时候产生的计算非常昂贵。琐碎且频繁的更新会使页面缓慢,同时这也是不可避免的。

2.我们可以用JavaScript对象来代替DOM节点

DOM节点在HTML文档中的表现通常是这样的:

<ul id='myId'>
 <li>Item 1</li>
 <li>Item 2</li>
<ul>

DOM节点也可以表示为一个JavaScript对象,就像这样:

//用Javascript代码表示DOM节点的伪代码
Let domNode = {
 tag: 'ul'
 attributes: { id: 'myId' }
 children: [
//这里是 li
 ]
};

这就是虚拟的DOM节点,很好理解吧。

3.更新虚拟节点, 并不昂贵贵

//更新虚拟DOM的代码
domNode.children.push('<ul>Item 3</ul>');

如果我们用一个虚拟DOM,而不是直接调用像.getElementById的方法,这样只操作JavaScript对象,这样是相当便宜的。

然后,再把更改的部分更新到真正的DOM,方法如下:

//这个方法是调用DOM API来更改真正DOM的
//它会分批执行从而获取更高的效率
sync(originalDomNode, domNode);

Vue.js在2.0 版本中引入虚拟DOM是一个正确的选择吗 ?

引入虚拟DOM实际上有优点也缺点。

1、尺寸

更多的功能意味着更多的代码。幸运的是Vue.js 2.0仍然是相当小的(21.4kb当前版本)。

2、内存

虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。

3、不是适合所有情况

如果虚拟DOM大量更改,这是合适的。但是单一的,频繁的更新的话,虚拟DOM将会花费更多的时间处理计算的工作。
所以,如果你有一个DOM节点相对较少页面,用虚拟DOM,它实际上有可能会更慢。
但对于大多数单页面应用,这应该都会更快。

除了性能提升外还有什么

引入虚拟DOM,这不仅仅是一种性能增强,这同时意味着更多的功能。

例如,您可以在虚拟DOM中的 render() 方法直接创建新的节点:

new Vue({
 el: '#app',
 data: {
 message: 'hello world'
 },
 render() {
 var node = this.$createElement;
 return node(
 'div', 
 { attrs: { id: 'myId' } }, 
 this.message
 );
 }
});

输出:

<div id='app'>
 <div id='myId'>hello world</div>
</div>

为什么这样做?你可以用全编程语言JavaScript编程,您可以创建工厂式的功能来建立虚拟节点。

总结

以上就是在这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 #Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 #Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 #Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 #Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 #Javascript
You might like
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python else语句在循环中的运用详解
2020/07/06 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
电气自动化大学生求职信
2013/10/16 职场文书
新教师岗前培训方案
2014/06/05 职场文书
告知书格式
2015/07/01 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
《山中访友》教学反思
2016/02/24 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript