写点什么

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:548925

评论

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

【堡垒机小知识】堡垒机能记录操作时间、操作数据等等吗?

行云管家

网络安全 堡垒机

火山引擎DataTester:让企业“无代码”也能用起来的A/B实验平台

字节跳动数据平台

AB testing实战 无代码 A/B 测试 企业号 4 月 PK 榜 企业增长

Java中线程的6种状态详解(NEW、RUNNABLE、BLOCKED、WAITING、TIMED_WAITING、TERMINATED)

共饮一杯无

Java 线程 线程状态 三周年连更

热榜!Alibaba最新发布「10亿级并发系统设计文档」Git狂揽9000星

Java你猿哥

数据库 架构 分布式 架构设计 并发系统

阅读完synchronized和ReentrantLock的源码后,竟发现其完全相似

Java你猿哥

并发编程 并发 synchronized SSM框架 ReentrantLock

BT!GitHub开源阿里Java性能调优百宝书仅3小时,标星竟超过30k

Java你猿哥

Java JVM 性能调优 SSM框架 Java工程师

带你一同认识和使用JPA框架进行开发你的应用服务

Java你猿哥

Java SSM框架 jpa Java工程师

全量通过,华为云GaussDB首批完成信通院全密态数据库评测

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 4 月 PK 榜

Scrum敏捷研发和项目管理

顿顿顿

Scrum 敏捷开发 敏捷开发流程 leangoo 敏捷开发管理工具

火山引擎 DataLeap下Notebook系列文章一:技术选型之路

字节跳动数据平台

notebook 数据研发 企业号 4 月 PK 榜

挑战 30 天学完 Python:Day9 条件语句

MegaQi

Python 挑战30天学完Python 三周年连更

阅读完synchronized和ReentrantLock的源码后,我竟发现其完全相似

做梦都在改BUG

Java 源码 synchronized ReentrantLock

字节面试官:你没有高并发、性能调优经验,为什么录取你?

做梦都在改BUG

Java 高并发 性能调优

Gradio:快速构建你的webApp

AIWeker

Python 三周年连更 Gradio

行云管家堡垒机有免费的吗?谁能告诉一下!

行云管家

高新企业 堡垒机 行云管家

Apifox 更新 | WebSocket 接口调试功能上线!

Apifox

程序员 开发工具 Apifox API 接口工具

如何用scrum敏捷工具做迭代规划及迭代执行。

顿顿顿

Scrum Sprint 敏捷开发管理工具 敏捷工具 迭代规划

GitHub和 Gitee联合编写最新版20w字Java全栈面试手册,简直无敌!

Java你猿哥

Java java面试 SSM框架 Java面经

硬核!万字神文精解高并发高可用系统实战,分布式系统一致性文档

做梦都在改BUG

Java 高可用 高并发 分布式一致性

华为云新一代iPaaS全域融合集成平台全新升级

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 4 月 PK 榜

Kurator v0.3.0版本发布!助力企业实现多云异构管理

华为云开发者联盟

开源 后端 华为云 华为云开发者联盟 企业号 4 月 PK 榜

从零学习SDK(7)如何打包SDK

MobTech袤博科技

安装Zookeeper和Kafka集群

Java你猿哥

Java kafka zookeeper SSM框架 Java工程师

ChatGPT无需API开发连接第三方系统,让舆情自动监控

集简云开放平台

数据集成 数据集成平台 Chat

接口设计文档的12个注意点

做梦都在改BUG

Java 后端开发 接口设计

从源码角度深入解析Callable接口

华为云开发者联盟

后端 开发 华为云 华为云开发者联盟 企业号 4 月 PK 榜

Linux:管道命令与文本处理三剑客(grep、sed、awk)

会踢球的程序源

Java Linux

女朋友要我讲解@Controller注解的原理,真是难为我了

Java你猿哥

Java spring Spring 配置解析

阿里大神整理的Java核心知识点和面试官常问到的知识点,压压惊

会踢球的程序源

Java 面试 求职 java面试 Java构架

火山引擎云原生数据仓库ByteHouse技术白皮书V1.0 (Ⅲ)

字节跳动数据平台

数据仓库 云原生 白皮书 数据仓库服务 企业号 4 月 PK 榜

GitHub上线重量级分布式架构原理设计笔记,开源的东西看着就是爽

Java你猿哥

架构 分布式 分布式架构

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