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);的更多相关文章

  1. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  2. 虚拟 DOM 到底是什么?

    虚拟 DOM 到底是什么? 作者:wangshengliang 注意:由于文章太长,对文章有删减,但是不会影响整体阅读 是什么? 虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 ...

  3. React虚拟DOM浅析

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

  4. 【React 7/100 】 虚拟DOM和Diff算法

    虚拟DOM和Diff算法 React更新视图的思想是:只要state变化就重新渲染视图 特点:思路非常清晰 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的 理想 ...

  5. 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...

  6. [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  7. 图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  8. React/虚拟DOM

    在说虚拟DOM之前,先来一个引子,从输入url到展现出整个页面都有哪些过程? 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTPP请求 5.服务器处理请求 6.服务器响应请求 7. ...

  9. React生命周期和虚拟DOM

    一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...

随机推荐

  1. 【原创】大数据基础之Hive(1)Hive SQL执行过程之代码流程

    hive 2.1 hive执行sql有两种方式: 执行hive命令,又细分为hive -e,hive -f,hive交互式: 执行beeline命令,beeline会连接远程thrift server ...

  2. Source Code Review

    1.berfore we talking abnout the Source Code review,here's what we want to know about the most popula ...

  3. Online tools

    Explore online vulnerability for servers and IoT devices : https://www.shodan.com get dumped leaked ...

  4. Java:Spring @Transactional工作原理

    本文将深入研究Spring的事务管理.主要介绍@Transactional在底层是如何工作的.之后的文章将介绍: propagation(事务传播)和isolation(隔离性)等属性的使用 事务使用 ...

  5. 剑指offer数组3

    面试题11:旋转数组的最小数字 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2 ...

  6. 金蝶K/3 审批相关SQL语句

    金蝶K/3 审批相关SQL语句 --http://127.0.0.1/lightApp/todocheckTask.aspx?AccID=84&&FClasstypeID=1071&a ...

  7. Java中CountDownLatch和CyclicBarrier的使用和比较

    CountDownLatch和CyclicBarrier同为Java1.5开始引入的,应用于多线程编程中的一种工具,二者用途十分相近,十分容易混淆. CountDownLatch CountDownL ...

  8. 毕向东—Java基础知识总结(超级经典)

    Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...

  9. 一份详细的asyncio入门教程

    asyncio模块提供了使用协程构建并发应用的工具.它使用一种单线程单进程的的方式实现并发,应用的各个部分彼此合作, 可以显示的切换任务,一般会在程序阻塞I/O操作的时候发生上下文切换如等待读写文件, ...

  10. vscode断点调试工程化服务端文件

    一.创建express应用我们使用express-generator创建一个新的express应用.1.全局安装express-generator // 安装 sudo npm install exp ...