深入剖析虚拟DOM提升性能(Vue,React);
I.原始渲染方式(直接操作DOM):
1.state数据;
2.JSX模板;
3.数据 + 模板 相结合,生成真实的DOM来显示;
4.state发生改变;
5.数据 + 模板结合,生成真实的DOM来显示,替换上一个模板;
II.原始渲染方式改良方案(比对之后再操作DOM):
1.state数据;
2.JSX模板;
3.数据 + 模板结合,生成真实的DOM来显示;
4.state发生改变;
5.数据 + 模板结合,生成真实的DOM,并不直接替换原来的DOM;
6.新的DOM和原始DOM做比对,找差异,找出相应的改变的地方,如只有span的内容发生了改变;
7.只用新的DOM中span元素,替换掉老的DOM中的span元素;
III.以React DOM渲染过程为例剖析虚拟DOM是如何提升性能的(操作虚拟DOM):
1.state数据;
2.JSX模板;
3.数据 + 模板组合,生成虚拟DOM,其实也就是生成一个JS对象,用它来描述真实DOM;
举个栗子,数据 + 模板组合,生成了如下的 JS 对象:(微损耗性能);
4.用虚拟DOM的结构生成真实的DOM,来显示:
5.state发生变化;
6.数据 + 模板生成新的虚拟DOM (极大的提升性能)
举个栗子,state 改变了span里面的内容,把 hello world 替换成了 you are so cute,则生成了如下的 JS 对象:
7.比较第3点生成的虚拟DOM和新的第6点生成的虚拟DOM,发现是span标签中内容发生了改变;(极大的提升了性能)
8.直接操作DOM,改变span中的内容;
综上三种渲染方式,我们发现I,II方法都是直接对DOM元素进行操作,而对DOM元素的直接操作极其影响性能,对性能的损耗极大,而方案III,亦即虚拟DOM的操作方案,虽然看上去步骤更为繁琐,损耗了一些性能,但因对虚拟DOM进行比对,比对完成后才会进行DOM的渲染,极大的提升了性能;综上可知,这就是虚拟DOM性能优化的关键所在;总结了一下,主要有如下两点优点:
深入剖析虚拟DOM提升性能(Vue,React);的更多相关文章
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 虚拟 DOM 到底是什么?
虚拟 DOM 到底是什么? 作者:wangshengliang 注意:由于文章太长,对文章有删减,但是不会影响整体阅读 是什么? 虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 ...
- React虚拟DOM浅析
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...
- 【React 7/100 】 虚拟DOM和Diff算法
虚拟DOM和Diff算法 React更新视图的思想是:只要state变化就重新渲染视图 特点:思路非常清晰 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的 理想 ...
- 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。
为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- 图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法
其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...
- React/虚拟DOM
在说虚拟DOM之前,先来一个引子,从输入url到展现出整个页面都有哪些过程? 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTPP请求 5.服务器处理请求 6.服务器响应请求 7. ...
- React生命周期和虚拟DOM
一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...
随机推荐
- 【原创】大数据基础之Hive(1)Hive SQL执行过程之代码流程
hive 2.1 hive执行sql有两种方式: 执行hive命令,又细分为hive -e,hive -f,hive交互式: 执行beeline命令,beeline会连接远程thrift server ...
- Source Code Review
1.berfore we talking abnout the Source Code review,here's what we want to know about the most popula ...
- Online tools
Explore online vulnerability for servers and IoT devices : https://www.shodan.com get dumped leaked ...
- Java:Spring @Transactional工作原理
本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的.之后的文章将介绍: propagation(事务传播)和isolation(隔离性)等属性的使用 事务使用 ...
- 剑指offer数组3
面试题11:旋转数组的最小数字 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2 ...
- 金蝶K/3 审批相关SQL语句
金蝶K/3 审批相关SQL语句 --http://127.0.0.1/lightApp/todocheckTask.aspx?AccID=84&&FClasstypeID=1071&a ...
- Java中CountDownLatch和CyclicBarrier的使用和比较
CountDownLatch和CyclicBarrier同为Java1.5开始引入的,应用于多线程编程中的一种工具,二者用途十分相近,十分容易混淆. CountDownLatch CountDownL ...
- 毕向东—Java基础知识总结(超级经典)
Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...
- 一份详细的asyncio入门教程
asyncio模块提供了使用协程构建并发应用的工具.它使用一种单线程单进程的的方式实现并发,应用的各个部分彼此合作, 可以显示的切换任务,一般会在程序阻塞I/O操作的时候发生上下文切换如等待读写文件, ...
- vscode断点调试工程化服务端文件
一.创建express应用我们使用express-generator创建一个新的express应用.1.全局安装express-generator // 安装 sudo npm install exp ...