BT

你的观点很重要! 快来参与InfoQ调研吧!

More than React(三)虚拟DOM已死?

| 作者 杨博 关注 1 他的粉丝 发布于 2016年9月23日. 估计阅读时间: 12 分钟 | ArchSummit社交架构图谱:Facebook、Snapchat、Tumblr等背后的核心技术

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

本系列的上一篇文章组件对复用性有害?探讨了如何在前端开发中编写可复用的界面元素。本篇文章中将从性能和算法的角度比较 Binding.scala 和其他框架的渲染机制。

Binding.scala 实现了一套精确数据绑定机制,通过在模板中使用 bind 和 for/yield 来渲染页面。你可能用过一些其他 Web 框架,大多使用脏检查或者虚拟 DOM 机制。和它们相比,Binding.scala 的精确数据绑定机制使用更简单、代码更健壮、性能更高。

ReactJS 虚拟 DOM 的缺点

比如, ReactJS 使用虚拟 DOM 机制,让前端开发者为每个组件提供一个 render 函数。render 函数把 props 和state 转换成 ReactJS 的虚拟 DOM,然后 ReactJS 框架根据 render 返回的虚拟 DOM 创建相同结构的真实 DOM.

每当 state 更改时,ReactJS 框架重新调用 render 函数,获取新的虚拟 DOM 。然后,框架会比较上次生成的虚拟 DOM 和新的虚拟 DOM 有哪些差异,然后把差异应用到真实 DOM 上。

这样做有两大缺点:

  1. 每次 state 更改,render 函数都要生成完整的虚拟 DOM. 哪怕 state 改动很小,render函数也会完整计算一遍。如果 render 函数很复杂,这个过程就白白浪费了很多计算资源。
  2. ReactJS 框架比较虚拟 DOM 差异的过程,既慢又容易出错。比如,假如你想要在某个 <ul> 列表的顶部插入一项<li> ,那么 ReactJS 框架会误以为你修改了 <ul> 的每一项 <li>,然后在尾部插入了一个 <li>。

这是因为 ReactJS 收到的新旧两个虚拟 DOM 之间相互独立,ReactJS 并不知道数据源发生了什么操作,只能根据新旧两个虚拟 DOM 来猜测需要执行的操作。自动的猜测算法既不准又慢,必须要前端开发者手动提供 key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法或者 componentWillUpdate 等方法才能帮助 ReactJS 框架猜对。

AngularJS 的脏检查

除了类似 ReactJS 的虚拟 DOM 机制,其他流行的框架,比如 AngularJS 还会使用基于脏检查的定值算法来渲染页面。

脏检查算法和 ReactJS 有一样的缺点,无法得知状态修改的意图,这使得 AugularJS 必须反复执行$digest轮循、反复检查各个ng-controller中的各个变量。除此之外,AngularJS 更新 DOM 的范围往往会比实际所需大得多,所以会比 ReactJS 还要慢。

Binding.scala 的精确数据绑定

Binding.scala 使用精确数据绑定算法来渲染 DOM 。

在 Binding.scala 中,你可以用 @dom 注解声明数据绑定表达式。@dom 会自动把 = 之后的代码包装成 Binding 类型。

比如:

@dom val i: Binding[Int] = 1
@dom def f: Binding[Int] = 100
@dom val s: Binding[String] = "content"

@dom 既可用于 val 也可以用于 def ,可以表达包括 Int 、 String 在内的任何数据类型。

除此之外,@dom 方法还可以直接编写 XHTML,比如:

@dom val comment: Binding[Comment] = <!-- This is a HTML Comment -->
@dom val br: Binding[HTMLBRElement] = <br/>
@dom val seq: Binding[BindingSeq[HTMLBRElement]] = <br/><br/>

这些 XHTML 生成的 CommentHTMLBRElement 是 HTML Node 的派生类。而不是 XML Node

每个 @dom 方法都可以依赖其他数据绑定表达式:

val i: Var[Int] = Var(0)
@dom val j: Binding[Int] = 2
@dom val k: Binding[Int] = i.bind * j.bind
@dom val div: Binding[HTMLDivElement] = <div>{ k.bind.toString }</div>

通过这种方式,你可以编写 XHTML 模板把数据源映射为 XHTML 页面。这种精确的映射关系,描述了数据之间的关系,而不是 ReactJS 的 render 函数那样描述运算过程。所以当数据发生改变时,只有受影响的部分代码才会重新计算,而不需要重新计算整个 @dom 方法。

比如:

val count = Var(0)

@dom def status: Binding[String] = {
  val startTime = new Date
  "本页面初始化的时间是" + startTime.toString + "。按钮被按过" + count.bind.toString + "次。按钮最后一次按下的时间是" + (new Date).toString
}

@dom def render = {
  <div>
    { status.bind }
    <button onclick={ event: Event => count := count.get + 1 }>更新状态</button>
  </div>
}

以上代码可以在ScalaFiddle实际运行一下试试。

注意,status 并不是一个普通的函数,而是描述变量之间关系的特殊表达式,每次渲染时只执行其中一部分代码。比如,当 count 改变时,只有位于 count.bind 以后的代码才会重新计算。由于 val startTime = new Date 位于count.bind 之前,并不会重新计算,所以会一直保持为打开网页首次执行时的初始值。

有些人在学习 ReactJS 或者 AngularJS 时,需要学习 key 、 shouldComponentUpdate 、 $apply 、 $digest 等复杂概念。这些概念在 Binding.scala 中根本不存在。因为 Binding.scala 的 @dom 方法描述的是变量之间的关系。所以,Binding.scala 框架知道精确数据绑定关系,可以自动检测出需要更新的最小部分。

结论

本文比较了虚拟 DOM 、脏检查和精确数据绑定三种渲染机制。

 

AngularJS

ReactJS

Binding.scala

渲染机制

基于脏检查的定值算法

虚拟DOM

精确数据绑定

数据变更时的运算步骤

  • 重复检查数据是否更改
  • 大范围更新页面,哪怕这部分页面根本没有修改
  • 重新生成整个虚拟DOM
  • 比较新旧虚拟DOM的差异
  • 根据差异更新页面
  • 直接根据数据映射关系,更新最小范围页面

检测页面更新范围的准确性

不准

默认情况下不准,需要人工提供`key`和`shouldComponentUpdate`才能准一点

需要前端工程师理解多少API和概念才能正确更新页面

很多

很多

只有`@dom`和`bind`两个概念

总体性能

非常差

这三种机制中,Binding.scala 的精确数据绑定机制概念更少,功能更强,性能更高。我将在下一篇文章中介绍 Binding.scala 如何在渲染 HTML 时静态检查语法错误和语义错误,从而避免 bug 。

相关链接

More than React 系列文章

《More than React(一)为什么ReactJS不适合复杂交互的前端项目?》

《More than React(二)组件对复用性有害?》

《More than React(三)虚拟DOM已死?》

《More than React(四)HTML也可以静态编译?》

《More than React(五)异步编程真的好吗?》

作者简介

杨博是 Haxe 和 Scala 社区的活跃贡献者,发起和维护的开源项目包括 protoc-gen-as3Stateless Futurehaxe-continuationFastringEachMicrobuilderBinding.scala 。杨博曾在网易任主程序和项目经理,开发过多款游戏。现在ThoughtWorks任Lead Consultant,为客户提供移动、互联网、大数据、人工智能和深度学习领域的解决方案。


感谢张凯峰对本文的策划,韩婷对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

错误太多,对其他框架缺乏了解 by 余 泽江

> 比如 AngularJS 还会使用脏检查算法来渲染页面

脏检查不是算法,只是一个(一系列)判断内容变化的方式,也就是通过另存副本事后比较的方式来得出变化情况。但脏检查这个概念本身既不包含如何判断内容发生变化也不涉及内容发生了怎样的变化。Virtual DOM 可以看成脏检查的特例。ng2 中可以为不同绑定手动配置检测方式之后实际上想用什么算法用什么算法。

> 必须完整重新计算 View 模板

React、Cycle 那样 Virtual DOM 才会重新计算 View,ng(不论几)都是数据绑定的方式,只计算 View Model。

> AngularJS 更新 DOM 的范围往往会比实际所需大得多

这就属于扯淡了,ng(仅限1)慢只是因为使用无脑检测所以检测量大(很大部分无意义),DOM 操作只会应用于实际修改的绑定内容没有差别。

Re: 错误太多,对其他框架缺乏了解 by Yang Bo

> AngularJS 更新 DOM 的范围往往会比实际所需大得多

这就属于扯淡了,ng(仅限1)慢只是因为使用无脑检测所以检测量大(很大部分无意义),DOM 操作只会应用于实际修改的绑定内容没有差别。


“AngularJS 更新 DOM 的范围往往会比实际所需大得多”是事实,不是扯谈。
比如:你把一个数组里装上字符串,然后用ng-repeat遍历。每当字符串改变时,AngularJS就会重新创建控件,而不只是更新绑定的值。这个问题很容易复现:codepen.io/djmarcus/pen/bVZGvj

这正是因为我说的AngularJS“无法得知状态修改的意图”。所以现实中开发者必须用各种Workaround绕开AngularJS的问题。比如把字符串包在对象里,然后加上track by才能帮助AngularJS猜对。

Re: 错误太多,对其他框架缺乏了解 by Yang Bo

> 比如 AngularJS 还会使用脏检查算法来渲染页面

脏检查不是算法,只是一个(一系列)判断内容变化的方式,也就是通过另存副本事后比较的方式来得出变化情况。但脏检查这个概念本身既不包含如何判断内容发生变化也不涉及内容发生了怎样的变化。Virtual DOM 可以看成脏检查的特例。ng2 中可以为不同绑定手动配置检测方式之后实际上想用什么算法用什么算法。


根据AngularJS官方文档上的术语,这里“脏检查算法”指的是AngularJS的定值算法(value stabilization algorithm)。从官方文档看,AngularJS定值算法的特征就是反复进行脏检查。所以本文这句话一点问题都没有。当然你想把这句话改成“基于脏检查的定值算法”也没问题。

Re: 错误太多,对其他框架缺乏了解 by Yang Bo

> 必须完整重新计算 View 模板

React、Cycle 那样 Virtual DOM 才会重新计算 View,ng(不论几)都是数据绑定的方式,只计算 View Model。


这是我的纰漏,我会联系InfoQ编辑修改。谢谢你的反馈。

Re: 错误太多,对其他框架缺乏了解 by 余 泽江

脏检测的概念定义问题暂时持保留态度。

关于基本类型数组的变化问题,只要采取事后比较的方式当然都无法唯一确定,一般都必然需要提供额外信息,不止是 Angular 需要 trackBy,React 也是一样需要提供 key 这个 Attribute 来辅助(facebook.github.io/react/docs/lists-and-keys.ht... ),这个可以说是 Angular 的问题,但肯定不是导致 Angular 比 React 慢的问题,这点显然不能用来支持

> 所以会比 ReactJS 还要慢。

这个因果推论。

另外,就这个问题博弈的结果(撇开个人练习、简单教程、作者连 API 都不熟的情况)往往都是提供额外的信息来换取性能,即(如果有需要的话) Angular/Vue 上几乎都会使用 trackBy,React 上几乎都会用 key,而并非说节约这几个字节(是额外成本但并不算高)来牺牲性能。所以并不认同

> AngularJS 更新 DOM 的范围往往会比实际所需大得多

这个观点。

Re: 错误太多,对其他框架缺乏了解 by Yang Bo

你无非就是说AngularJS的ng-repeat跟ReactJS一样糟糕嘛。我觉得你说得对。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

6 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT