你不知道的 Virtual DOM(一):Virtual Dom 介绍

栏目: JavaScript · 发布时间: 6年前

内容简介:目前最流行的两大前端框架,React和Vue,都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么,什么是Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?本系列文章会详细讲解Virtual DOM的创建过程,并实现一个简单的Diff算法来更新页面。本文的内容脱离于任何的前端框架,只讲最纯粹的Virtual DOM。敲单词太累了,下文Virtual DOM一律用VD表示。这是VD系列文章的开篇,以下是本系列其它文章的传送门:PS:系列文章可点击“

前言

目前最流行的两大前端框架,React和Vue,都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么,什么是Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?本系列文章会详细讲解Virtual DOM的创建过程,并实现一个简单的Diff算法来更新页面。本文的内容脱离于任何的前端框架,只讲最纯粹的Virtual DOM。敲单词太累了,下文Virtual DOM一律用VD表示。

这是VD系列文章的开篇,以下是本系列其它文章的传送门:

  • 你不知道的Virtual DOM(一):Virtual Dom介绍

  • 你不知道的Virtual DOM(二):Virtual Dom的更新

  • 你不知道的Virtual DOM(三):Virtual Dom更新优化

  • 你不知道的Virtual DOM(四):key的作用

  • 你不知道的Virtual DOM(五):自定义组件

  • 你不知道的Virtual DOM(六):事件处理&异步更新

PS:系列文章可点击“ 阅读全文 ”查看。

VD是什么

本质上来说,VD只是一个简单的JS对象,并且最少包含tag、props和children三个属性。不同的框架对这三个属性的命名会有点差别,但表达的意思是一致的。它们分别是标签名(tag)、属性(props)和子元素对象(children)。下面是一个典型的VD对象例子:

VD跟dom对象有一一对应的关系,上面的VD是由以下的HTML生成的:

一个dom对象,比如 li ,由 tag(li) , props({id:1,class:"li-1"})children(["第",1]) 三个属性来描述。

为什么需要VD

借助VD,可以达到有效减少页面渲染次数的目的,从而提高渲染效率。我们先来看下页面的更新一般会经过几个阶段。

你不知道的 Virtual DOM(一):Virtual Dom 介绍

从上面的例子中,可以看出页面的呈现会分以下3个阶段:

  • JS计算

  • 生成渲染树

  • 绘制页面 这个例子里面,JS计算用了  691 毫秒,生成渲染树  578 毫秒,绘制  73 毫秒。如果能有效的减少生成渲染树和绘制所花的时间,更新页面的效率也会随之提高。 通过VD的比较,我们可以将多个操作合并成一个批量的操作,从而减少dom重排的次数,进而缩短了生成渲染树和绘制所花的时间。至于如何基于VD更有效率的更新dom,是一个很有趣的话题,日后有机会将另写一篇文章介绍。

如何实现VD与真实DOM的映射

我们先从如何生成VD说起。借助JSX编译器,可以将文件中的HTML转化成函数的形式,然后再利用这个函数生成VD。看下面这个例子:

这个函数经过JSX编译后,会输出下面的内容:

这里的h是一个函数,可以起任意的名字。这个名字通过babel进行配置:

接下来,我们只需要定义h函数,就能构造出VD:

h函数会传入三个或以上的参数,前两个参数一个是标签名,一个是属性对象,从第三个参数开始的其它参数都是children。children元素有可能是数组的形式,需要将数组解构一层。比如:

继续之前的例子。执行h函数后,最终会得到如下的VD对象:

下一步,通过遍历VD对象,生成真实的dom:

createElement 函数执行完后,dom元素就创建完并展示到页面上了(页面比较丑,不要介意...)。

你不知道的 Virtual DOM(一):Virtual Dom 介绍

总结

本文介绍了VD的基本概念,并讲解了如何利用JSX编译HTML标签,然后生成VD,进而创建真实dom的过程。下一篇文章将会实现一个简单的VD Diff算法,找出2个VD的差异并将更新的元素映射到dom中去。

欢迎关注 SegmentFault 微信公众号 :)

你不知道的 Virtual DOM(一):Virtual Dom 介绍


以上所述就是小编给大家介绍的《你不知道的 Virtual DOM(一):Virtual Dom 介绍》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

颠覆式成长

颠覆式成长

惠特尼•约翰逊 / 张瀚文 / 中信出版集团 / 2018-8 / 49.00

你可能想要标新立异、挑战自我,甚至抛弃安逸的事业; 你可能会从目前的行业或公司中跳槽,进入一个完全陌生的崭新领域, 这本书会让你认识到颠覆式成长的意义所在。 成功没有捷径,颠覆也会令人心生惧意,但是在职业发展与个人成长上的回报,会让你克服这种恐惧,让你不断尝试、不断精进。 S型曲线精进模型将帮助你预测自己创新的成长周期,洞悉颠覆自我过程中的心路历程,在变革与颠覆中从容应对,......一起来看看 《颠覆式成长》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具