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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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
桌面中心(四)数据显示
2006/10/09 PHP
如何做到多笔资料的同步
2006/10/09 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python OS模块实例详解
2019/04/15 Python
Python assert关键字原理及实例解析
2019/12/13 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
初中科学教学反思
2014/01/21 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
校运会入场式解说词
2014/02/10 职场文书
公安学专业求职信
2014/07/27 职场文书
银行奉献演讲稿
2014/09/16 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
重阳节活动主持词
2015/07/04 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS