React的Virtual DOM厉害了
React 的伟大之处就在于,提出了Virtual DOM这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发。
在性能方面,由于用到了Virtual DOM技术,React只在调用setState时会更新dom,而且还是更新virtual DOM,然后和实际的DOM比较,最后再更新实际的DOM。
Virtual DOM的核心思想是:批量操作DOM和作用最少的diff
你一个接一个地去修改30个节点的时候,就会引起30次(潜在的)布局重算,30次(潜在的)重绘,等等。
之后,一旦你要把这些改动传递给真实DOM,之前所有的改动就会整合成一次DOM操作。这一次DOM操作引起的布局计算和重绘可能会更大,但是相比而言,整合起来的改动只做一次,减少了(多次)计算。
这就是所谓的Virtual DOM算法,包括几个步骤:
1.用javascript对象结构表示DOM树的结构,然后用这个树构建一个真正的DOM树,插入到文档流中
2.当文档变更时,重新构造一颗新的对象树,然后用新的对象树和旧的对象树对比,记录两棵树的差异
3.把2所记录的差异应用到1所构建的真正的DOM树上,就实现变更了
Virtual DOM本质上就是在JS和DOM之间做了一个缓存。可以类比CPU和硬盘,既然硬盘这么慢,我们就在他们之间加一个缓存。既然JS这么慢,我们就在JS和DOM之间加一个缓存。CPU只操作内存,最后把变更写入硬盘。JS只操作Virtual DOM,最后把变更写入DOM。
其思想的关键是:
1.相对于 DOM 对象,原生的JS对象处理起来更快更简单。
2.比较两棵DOM树的差异是 Virtual DOM算法最核心的部分,这也是所谓的Vritual DOM的diff算法。
为什么快很多?
当然如果真的这样大面积的操作 DOM,性能会是一个很大的问题,所以 React 实现了一个虚拟 DOM,组件 DOM 结构就是映射到这个虚拟 DOM 上,React 在这个虚拟 DOM 上实现了一个 diff 算法,当要更新组件的时候,会通过 diff 寻找到要变更的 DOM 节点,再把这个修改更新到浏览器实际的 DOM 节点上,所以实际上不是真的渲染整个 DOM 树。这个虚拟 DOM 是一个纯粹的 JS 数据结构,所以性能会比原生 DOM 快很多
React的Virtual DOM厉害了的更多相关文章
- 深入理解 React 的 Virtual DOM
React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...
- react的Virtual DOM
一.Virtual DOMVirtual DOM是一个JavaScript对象,v8引擎使得js可以高效运行,而直接操作DOM很慢.Virtual DOM本质上就是在JS和DOM之间做了一个缓存.可以 ...
- React:关于虚拟DOM(Virtual DOM)
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...
- React Virtual DOM Explained in Simple English
If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is ...
- React virtual DOM explained in simple English/简单语言解释React的虚拟DOM
初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...
- 个人对于Virtual DOM的一些理解
之前一直认为react的Virtual DOM操作会比传统的操作DOM要快,这其实是错误的,React 从来没有说过 "React 比原生操作 DOM 快".如果没有 Virtua ...
- 【转】Virtual DOM
前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...
- 【vue系列】Virtual DOM 真的比操作原生 DOM 快吗?
一.前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重 ...
- 如何理解Virtual DOM
什么是虚拟DOM 接下来用vdom(Virtual DOM)来简称为虚拟DOM. 指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做.换而言之,虚拟DOM就是JS对象.如下DOM结构: & ...
随机推荐
- 与app交互因异步造成的坑记录
一.问题产生背景: 在app内跳转到H5页面,初始页面获取用户等各种信息,前端除了可以获取链接上的参数去请求接口,接着进行数据的缓存等,也可以去获取app写入window的数据,然后进行其他的操作.公 ...
- 2019年Java后端工程师常见面试题和感想
来新公司有5个月了,从第二个月开始就参与公司后端工程师的面试工作了,包括校招在内,面试超过100个(包括40个校招的终面)应聘者了,应聘者中有超过10年的技术经理,有6年以上的高级开发,有3到5年的中 ...
- FlowPortal BPM 验证组的使用方法
1.在表单上指定验证组 2.在流程上指定验证组 3.启用多个验证组 流程审批线上设置验证组时可以设置多个验证组,多个验证组之间以分号分割,如:AAA;BBB.
- FlowPortal BPM 明细表中新添加的行一直排在最后的问题
明细表中的数据提交过之后再编辑时,添加的行不管在第几行添加都显示在最后一行的问题 Solution:明细表的数据库表中加字段OrderIndex,设为必填,系统会自动排序
- buffers和cached
buffers和cached是为了提高数据访问性能,减少对磁盘的I/O操作 buffers 用来给块设备做的缓冲大小 例如,目录内容,权限 cached 用来给文件做缓冲 例如,打开的文件 测试 先后 ...
- Forms Process (FRMWEB) Consumes 100% of CPU in Oracle Applications R12 (文档 ID 745711.1)
https://support.oracle.com/epmos/faces/DocumentDisplay?_afrLoop=283767243216583&id=745711.1& ...
- 成为一个高级java架构师所需要具备那些技能呢?
一.什么是架构师 所谓架构师,思考的是全局的东西,是如何组织你的系统,以达到业务要求,性能要求,具备可扩展性(scalability),可拓展性(extendability),前后兼容性等.可能涉及到 ...
- 作为一个java高级工程师的进阶之路
本文可能可能更偏向于是内心的独白篇和面试技巧总结 一.独白 之前也面试别人,现在轮到自己找工作,怎么说呢,每个面试官的看法不一样,面试的方式就不一样,比如我面试别人我喜欢问项目中他用到了那些,然后针对 ...
- Mysql高可用集群-解决MMM单点故障
目录 一.理论概述 组件介绍 三.部署 四.测试 五.总结 preface: MMM架构相比于MHA来说各方面都逊色不少,写这篇案例也算是整理下思路吧. 一.理论概述 MMM(Master-Maste ...
- gitlab安装教程 正在修炼的西瓜君
查看内存配置 我们先不急着来安装gitlab,先来看一下自己电脑的内存情况,我把这一步提到最前面,是因为这是我安装过程中遇到的最大的坑. 下面是gitlab的cpu和内存需求(https://do ...