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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
node+vue实现文件上传功能
May 28 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php在字符串中查找另一个字符串
2008/11/19 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
原生js轮播特效
2017/05/18 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
综合测评自我评价
2015/03/06 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python