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 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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的in_array低性能问题
2013/09/17 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python制作抖音代码舞
2019/04/07 Python
python实现中文文本分句的例子
2019/07/15 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
大学竞选班干部演讲稿
2014/08/21 职场文书
红色电影观后感
2015/06/18 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书