浅谈React的最大亮点之虚拟DOM


Posted in Javascript onMay 29, 2018

在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。

一、什么是虚拟DOM?

在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。

虚拟DOM是React的一大亮点,具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。在实际开发中基本无需关心虚拟DOM是如何运作的,但是理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化 React程序也会有很大帮助。

二、虚拟DOM VS 直接操作原生DOM?

如果没有 Virtual DOM,简单来说就是直接重置 innerHTML。这样操作,在一个大型列表所有数据都变了的情况下,还算是合理,但是,当只有一行数据发生变化时,它也需要重置整个 innerHTML,这时候显然就造成了大量浪费。

比较innerHTML 和Virtual DOM 的重绘过程如下:

innerHTML: render html string + 重新创建所有 DOM 元素

Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新

和 DOM 操作比起来,js 计算是非常便宜的。Virtual DOM render + diff 显然比渲染 html 字符串要慢,但是,它依然是纯 js 层面的计算,比起后面的 DOM 操作来说,依然便宜了太多。当然,曾有人做过验证说React的性能不如直接操作真实DOM,代码如下:

function Raw() {
  var data = _buildData(),
    html = "";
  ...
  for(var i=0; i<data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
}

该测试用例中虽然构造了一个包含1000个Tag的String,并把它添加到DOM树中,但是只做了一次DOM操作。然而,在实际开发过程中,这1000个元素更新可能分布在20个逻辑块中,每个逻辑块中包含50个元素,当页面需要更新时,都会引起DOM树的更新,上述代码就近似变成了如下格式:

function Raw() {
  var data = _buildData(), 
    html = ""; 
  ... 
  for(var i=0; i<data.length; i++) { 
    var render = template; 
    render = render.replace("{{className}}", ""); 
    render = render.replace("{{label}}", data[i].label); 
    html += render; 
    if(!(i % 50)) {
      container.innerHTML = html;
    }
  } 
  ... 
}

这样来看,React的性能就远胜于原生DOM操作了。

而且,DOM 完全不属于Javascript (也不在Javascript 引擎中存在).。Javascript 其实是一个非常独立的引擎,DOM其实是浏览器引出的一组让Javascript操作HTML文档的API而已。在即时编译的时代,调用DOM的开销是很大的。而Virtual DOM的执行完全都在Javascript 引擎中,完全不会有这个开销。

React.js 相对于直接操作原生DOM有很大的性能优势, 很大程度上都要归功于virtual DOM的batching 和diff。batching把所有的DOM操作搜集起来,一次性提交给真实的DOM。diff算法时间复杂度也从标准的的Diff算法的O(n^3)降到了O(n)。这里留到下一次博客单独讲。

三、虚拟DOM VS MVVM?

相比起 React,其他 MVVM 系框架比如 Angular, Knockout 以及 Vue、Avalon 采用的都是数据绑定:通过 Directive/Binding 对象,观察数据变化并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作。MVVM 的变化检查是数据层面的,而 React 的检查是 DOM 结构层面的。MVVM 的性能也根据变动检测的实现原理有所不同:Angular 的脏检查使得任何变动都有固定的 O(watcher count) 的代价;Knockout/Vue/Avalon 都采用了依赖收集,在 js 和 DOM 层面都是 O(change):

  1. 脏检查:scope digest + 必要 DOM 更新
  2. 依赖收集:重新收集依赖 + 必要 DOM 更新

可以看到,Angular 最不效率的地方在于任何小变动都有的和 watcher 数量相关的性能代价。但是!当所有数据都变了的时候,Angular 其实并不吃亏。依赖收集在初始化和数据变化的时候都需要重新收集依赖,这个代价在小量更新的时候几乎可以忽略,但在数据量庞大的时候也会产生一定的消耗。

MVVM 渲染列表的时候,由于每一行都有自己的数据作用域,所以通常都是每一行有一个对应的 ViewModel 实例,或者是一个稍微轻量一些的利用原型继承的 "scope" 对象,但也有一定的代价。所以,MVVM 列表渲染的初始化几乎一定比 React 慢,因为创建 ViewModel / scope 实例比起 Virtual DOM 来说要昂贵很多。这里所有 MVVM 实现的一个共同问题就是在列表渲染的数据源变动时,尤其是当数据是全新的对象时,如何有效地复用已经创建的 ViewModel 实例和 DOM 元素。假如没有任何复用方面的优化,由于数据是 “全新” 的,MVVM 实际上需要销毁之前的所有实例,重新创建所有实例,最后再进行一次渲染!这就是为什么题目里链接的 angular/knockout 实现都相对比较慢。相比之下,React 的变动检查由于是 DOM 结构层面的,即使是全新的数据,只要最后渲染结果没变,那么就不需要做无用功。

Angular 和 Vue 都提供了列表重绘的优化机制,也就是 “提示” 框架如何有效地复用实例和 DOM 元素。比如数据库里的同一个对象,在两次前端 API 调用里面会成为不同的对象,但是它们依然有一样的 uid。这时候你就可以提示 track by uid 来让 Angular 知道,这两个对象其实是同一份数据。那么原来这份数据对应的实例和 DOM 元素都可以复用,只需要更新变动了的部分。或者,你也可以直接 track by $index 来进行 “原地复用”:直接根据在数组里的位置进行复用。在题目给出的例子里,如果 angular 实现加上 track by $index 的话,后续重绘是不会比 React 慢多少的。甚至在 dbmonster 测试中,Angular 和 Vue 用了 track by $index 以后都比 React 快: dbmon (注意 Angular 默认版本无优化,优化过的在下面)

在比较性能的时候,要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。Virtual DOM、脏检查 MVVM、数据收集 MVVM 在不同场合各有不同的表现和不同的优化需求。Virtual DOM 为了提升小量数据更新时的性能,也需要针对性的优化,比如 shouldComponentUpdate 或是 immutable data。

  1. 初始渲染:Virtual DOM > 脏检查 >= 依赖收集
  2. 小量数据更新:依赖收集 >> Virtual DOM + 优化 > 脏检查(无法优化) > Virtual DOM 无优化
  3. 大量数据更新:脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM(无法/无需优化)>> MVVM 无优化
  4. (该段落借鉴了知乎的相关回答)

四、对React虚拟DOM的误解?

React 从来没有说过 “React 比原生操作 DOM 快”。React给我们的保证是,在不需要手动优化的情况下,它依然可以给我们提供过得去的性能。

React掩盖了底层的 DOM 操作,可以用更声明式的方式来描述我们目的,从而让代码更容易维护。下面还是借鉴了知乎上的回答:没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的实现必须是普适的。针对任何一个 benchmark,我都可以写出比任何框架更快的手动优化,但是那有什么意义呢?在构建一个实际应用的时候,你难道为每一个地方都去做手动优化吗?出于可维护性的考虑,这显然不可能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
深入理解Vue Computed计算属性原理
May 29 #Javascript
javascript、php关键字搜索函数的使用方法
May 29 #Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 #Javascript
Vue 组件传值几种常用方法【总结】
May 28 #Javascript
讲解vue-router之命名路由和命名视图
May 28 #Javascript
微信小程序实现图片上传功能
May 28 #Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 #Javascript
You might like
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
深入理解PHP中的global
2014/08/19 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
js post提交调用方法
2014/02/12 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
详解VueJs中的V-bind指令
2018/05/03 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue之延时刷新实例
2019/11/14 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
python处理大日志文件
2019/07/23 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
注塑工厂厂长岗位职责
2013/12/02 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
激励口号大全
2014/06/17 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android