未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

文 | 大白 on 美业

一、前言

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

这是 VD 系列文章的第二篇,本文将会实现一个简单的 VD Diff 算法,计算出差异并反映到真实的 DOM 上去。

二、思路

使用 VD 的框架,一般的设计思路都是页面等于页面状态的映射,即 UI=render(state) 。当需要更新页面的时候,无需关心 DOM 具体的变换方式,只需要改变 state 即可,剩下的事情( render )将由框架代劳。我们考虑最简单的情况,当 state 发生变化时,我们重新生成整个 VD ,触发比较的操作。上述过程分为以下四步:

state 变化,生成新的 VD

比较 VD 与之前 VD 的异同

生成差异对象( patch )

遍历差异对象并更新 DOM 差异对象的数据结构是下面这个样子,与每一个 VDOM 元素一一对应:

最外层的 type 对应的是 DOM 元素的变化类型,有 4 种:新建、删除、替换和更新。props 变化的 type 只有2种:更新和删除。枚举值如下:

三、代码实现

我们做一个定时器,500 毫秒运行一次,每次对 state 加 1。页面的 li 元素的数量随着 state 而变。

接下来,通过对比 2 个 VD,生成差异对象。

计算得出的差异对象是这个样子的:

下一步就是遍历差异对象并更新 DOM 了:

到此为止,整个更新的流程就执行完了。可以看到页面跟我们预期的一样,每 500 毫秒刷新一次,构造渲染树和绘制页面花的时间也非常少。


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

作为对比,如果我们在生成新的 VD 后,不经过比较,而是直接重新渲染整个 DOM 的时候,会怎样呢?我们修改一下代码:

效果如下:


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

可以看到,构造渲染树( Rendering )和绘制页面( Painting )的时间要多一些。但另一方面花在 JS 计算( Scripting )的时间要少一些,因为不需要比较节点的变化。如果算总时间的话,重新渲染整个 DOM 花费的时间反而更少,这是为什么呢?

其实原因很简单,因为我们的 DOM 树太简单了!节点很少,使用到的 css 也很少,所以构造渲染树和绘制页面就花不了多少时间。VD 真正的效果还是要在真实的项目中才体现得出来。

四、总结

本文详细介绍如何实现一个简单的 VD Diff 算法,再根据计算出的差异去更新真实的 DOM 。然后对性能做了一个简单的分析,得出使用 VD 在减少渲染时间的同时增加了 JS 计算时间的结论。基于当前这个版本的代码还能做怎样的优化呢,请期待下一篇的内容: 《你不知道的Virtual DOM(三):Virtual DOM 更新优化》

P.S: 想看完整代码见这里,如果有必要建一个仓库的话请留言给我:代码(https://gist.github.com/dickenslian/a0a8d41a88d566d86271de16cd7738f0 )

扩展阅读:

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

-The End-

Vol.122

有赞技术团队

为 300 万商家,150 个行业,200 亿电商交易额

提供技术支持

微商城|零售|美业

微信公众号:有赞coder 微博:@有赞技术

技术博客:tech.youzan.com

The bigger the dream,

the more important the team.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:你不知道的 Virtual DOM(二):Virtual DOM 的更新
本站链接:https://www.codesec.net/view/611844.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(12)