QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

  • 2016-09-22
  • 本文字数:5515 字

    阅读完需:约 18 分钟

本系列的上一篇文章组件对复用性有害?探讨了如何在前端开发中编写可复用的界面元素。本篇文章中将从性能和算法的角度比较 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 生成的 Comment HTMLBRElement 是 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-as3 Stateless Future haxe-continuation Fastring Each Microbuilder Binding.scala  。杨博曾在网易任主程序和项目经理,开发过多款游戏。现在 ThoughtWorks 任 Lead Consultant,为客户提供移动、互联网、大数据、人工智能和深度学习领域的解决方案。


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

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

2016-09-22 10:548858

评论

发布
暂无评论
发现更多内容

闭关修炼21天,“啃完”283页pdf,我终于4面拿下字节跳动offer

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

FastApi-11-模板渲染

Python研究所

FastApi 8月日更

【插画】一文看懂容器k8s

恒生LIGHT云社区

Docker 容器 k8s

差点跳起来了!全靠这份999页Java面试宝典,我刚拿到美团offer

Java~~~

Java 架构 面试 微服务 多线程

当容器应用越发广泛,我们又该如何监测容器?

阿里巴巴云原生

云计算 容器 云原生 监控 中间件

大数据集群跨多版本升级、业务0中断,只因背后有TA

华为云开发者联盟

大数据 FusionInsight

贡献者,是衡量开源项目的金指标

API7.ai 技术团队

开源 网关 APISIX

高防云服务器服务器的价值会随着时间而扩展,从"成本效率"扩展到"新服务和技术"

九河云安全

数据中台——数据汇聚存储技术解析

用友BIP

数据中台 数据存储

直击美团“远程面试”现场,面试官竟反问:你真懂数据库事务吗?

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

高防服务器大数据时代下的最佳应用途径

九河云安全

跨链治理之入门三问 :WHO WHAT HOW

趣链科技

区块链 治理机制

拒绝内卷!Github连夜封杀的阿里全套Spring Security高级笔记

Java 编程 架构 面试 程序人生

阿里(钉钉部门)远程面,三面坐上“直通车”,拿下offer没问题

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

跟我读论文丨ACL2021 NER BERT化隐马尔可夫模型用于多源弱监督命名实体识别

华为云开发者联盟

BERT 弱监督 隐马尔可夫 CHMM HMM模型

YYDS《剑指Offer》再续新篇,百万程序员人手一册

博文视点Broadview

云小课 | 到底什么是区块链?

华为云开发者联盟

区块链 华为云 区块链的定义 区块链的解决方案 区块链的发展

某离散制造行业龙头客户“主数据管理平台”建设分享

用友BIP

主数据管理

数据中台为什么要建标签体系,分类它不香吗?

用友BIP

数据中台 标签体系

测试开发之系统篇-Docker容器安装

禅道项目管理

Docker 测试开发

1年半经验,2本学历,Curd背景,竟给30K,我的美团Offer终于来了

Java~~~

Java 架构 面试 微服务 多线程

数据库的简述与常用操作指南

行者AI

数据库

信创产业已成现象级新风口,快来加入争做“弄潮儿”

华为云开发者联盟

开源 信创 opengauss openEuler 鲲鹏

c++ 构造函数详解

若尘

c++ 构造函数 8月日更

2年5个月13天,从外包到拿下阿里offer,没想到屌丝也能有今天

Java~~~

Java spring 架构 面试 微服务

耗时3年,从小厂逆袭,坐上美团L8技术专家(面经+心得)

Java 编程 程序员 架构 面试

云计算运维与传统运维工作有啥不同?需要什么资质?

行云管家

云计算 服务器 IT运维 云计算运维

高防服务器,企业成长安全控制有效性的关键工具

九河云安全

Go 效率工具集合

潇洒哥 - 老苗

Go 语言

读完这份JVM高级笔记,彻底玩转Java虚拟机,面试再也不用“虚”

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

企业在运营过程中需要解决的五项网络安全项目

九河云安全

More than React(三)虚拟DOM已死?_JavaScript_杨博_InfoQ精选文章