【译】真实的 Virtual DOM

Sep 08 2016 前端

为什么我们需要UI框架?

 响应式编程提出两个最重要的观点是:系统应该是事件驱动并且响应状态的变化。
 DOM的UI组件有自己的内部状态,更新浏览器页面并不是在发生变化后简单的重新生成DOM。如果Gmail这样做的话,出现一条新消息或者删掉你写的邮件,就会导致整个浏览器窗口刷新。
 正是因为DOM的无状态性,我们才需要类似key/value observation(Ember中使用了它),或者脏值检查(Angular)。UI框架监听数据模型的变化,并在DOM中更新对应的部分。或者监听DOM的变化,更新对应的数据模型。这就是所谓的双向数据绑定。它通常可以处理非常复杂的UI逻辑。

什么让React与众不同?

 令React以及它的Virtual DOM如此与众不同的是:它比其他实现JavaScript响应数据的方法都更简单。你只需写JavaScript去更新React组件,React会帮你更新DOM。数据绑定并没有和应用缠在一起。
 React使用单向数据绑定来简化这一过程。每次当你在一个React组件的input文本框中输入时,它并不会直接改变这个组件的状态,而是更新数据模型。这会使得UI被更新,你输入的文本就会出现在文本框里。

DOM很慢?

 所有关于Virtual DOM的文章或演讲都在说JavaScript引擎很快,读写浏览器的DOM很慢。这种说法完全不对。DOM是很快的。添加删除DOM节点并不比在JavaScript对象上设置属性慢很多,只是简单的运算罢了。
 然而,真正慢的是当DOM改变时浏览器的layout。DOM的每次改变,浏览器都需要重新计算CSS,重排重绘整个页面。这是很耗时的。
那些写浏览器的人一直在努力缩短重绘的时间,其中最大的工作是最小化、分批处理DOM改变。

Virtual DOM如何工作?

 就像真实的DOM,Virtual DOM也是一颗节点树。节点树上元素是对象,attribute和内容是对象的属性。React的render方法从组件上创建一颗节点树,在action触发数据模型发生mutation后响应式的更新节点树。
 每次在数据改变之后,就会在UI更新之前创建一个新的Virtual DOM。在React中,更新浏览器的DOM分三个步骤:
1. 只要数据发生改变,就会重新生成一个完整的Virtual DOM。
2. 重新计算比较出新的和之前的Virtual DOM的差异。
3. 更新真实DOM中真正发生改变的部分,就像是给DOM打了个补丁。

Virtual DOM慢吗?

 我们可以想到每次改变都重新渲染整个Virtual DOM是很浪费的,却没有注意到任意时刻React都在内存中保存了两个Virtual DOM。但是,其实渲染Virtual DOM总是会比渲染真实DOM快,这跟你使用的浏览器无关。
 问题是用户并不能看到Virtual DOM。就好比你在其他国家有10000个墨西哥煎玉米卷,你迟早需要把玉米卷运回来,那会很贵并且缓慢。
 玉米卷问题的关键在于:一次把所有玉米卷运回来更快,还是计算出你需要的数量和你实际拥有的数量,然后仅仅运输两者最小值更快?当你只想要4个玉米卷的时候,当然只运输4个更划算。
 下一个问题是:你如何预定玉米卷?你可以说,“给我运送4个玉米卷”,或者说,“这是我的玉米卷状态清单,你计算出实际结果吧”。第二个方法就是Virtual DOM工作的方式。你写代码来让UI知道你想让他如何展示,Virtual DOM计算出当前UI和它只需要更新的部分的差异。
 React像变戏法般的将attribute加到元素上,然后在DOM Diff后决定需要更新的部分,并在文档上单独的修改这些元素。Virtual DOM加入了额外的步骤,但是它创造了一种优雅的方式去对页面做最小的更新。

我们来看一些数字

 我不打算做标准的测试。其他人做的各种各样的测试已经证明了React的Virtual DOM更快。Virtual DOM在开发者对浏览器的性能优化之上加了一层脚本。这个额外的一层抽象使React相比其他更新DOM的方法,需要更多的CPU密集计算。
 举个使用原生JS操作DOM的“Hello,world!”的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello JavaScript!</title>
</head>
<body>
<div id="example"></div>
<script>
document.getElementById("example").innerHTML = "<h1>Hello, world!</h1>";
</script>
</body>
</html>

 你在React中也会做同样的事。我们需要通过React、React DOM和babel,将看起来像是XML的代码在render()方法中转换成普通的JavaScript对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

原生操作DOM总是会更快。我们来看一下证明过程。
这是加载和渲染直接DOM操作的“Hello,World”页面的timeline(chrome)

原生DOM操作
这是加载和渲染React“Hello,World”页面的timeline(chrome)

React DOM操作
React花了大量时间在scripting上,React比直接操作DOM慢的多。但是,它和jQuery比怎么样?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello jQuery!</title>
<script type="text/javascript" src="scripts/vendor/jquery-1.12.3.min.js"></script>
</head>
<body>
<div id="example"></div>
<script>
$(document).ready(function(){
$("#example").html("<h1>Hello, world!</h1>"); }
);
</script>
</body>
</html>

jQuery DOM操作
 jQuery的总时间比原生JS慢了50ms,但都比React快3倍。显然,原生JS和jQuery要快得多。一般来说,使用框架都比不使用框架慢。实际操作DOM前在内存中创建一个表示DOM的结构比直接操作DOM要慢。下面,我们讨论一下究竟该如何让Virtual DOM更快。

如何使用Virtual DOM

 “Hello,World”例子对React不公正,因为他们仅仅包含了一个页面的初始渲染。React长于管理页面的更新。
 数据模型的每一次改变都会触发Virtual DOM的重新生成,这就是React和其他框架的不同之处。其他框架会检测文档的变化,只更新必要的部分。Virtual DOM通常占用更少的内存,因为它不需要在内存中常驻观察者。
 但是,每次改动发生后都比较两个完整的Virtual DOM是低效的。复杂的UI对于CPU的要求也很高。
 鉴于这个原因,React开发者要主动决定需要渲染的内容。如果你知道某个行为不会影响对应的组件,你应当告知React不要去分析组件的变动–这可以节省大量的资源,显著地提升应用的性能。
 事实上,可能没有办法真正说明使用Virtual DOM比直接操作DOM快,因为要做这种比较需要考虑各种各样的因素。但是主要还是取决于你如何更好的优化应用。
 工具只是工具,关键看你怎么用它。React和Virtual DOM带给我们的是:一种更新页面的简单方法。这种简化能让我们摆脱繁杂的工作,使优化UI变得简单。这就是React带来的真正好处–性能和生产力


原文作者:Chris Minnick
翻译:熊贤仁

JavaScript, 翻译, React