-
虚拟dom_虚拟DOM和DOM diff
2020-12-24 14:01:41虚拟DOM本质上是一个能代表DOM树的对象,通常含有标签名,标签名上的属性,监听事件和子元素们以及他们的属性1.2 虚拟DOM的优点?1.2.1 减少DOM操作虚拟DOM可将多次操作合并成一次完成,比如:当需要添加1000个节点...虚拟DOM
1.1 虚拟DOM是什么?
虚拟DOM本质上是一个能代表DOM树的对象,通常含有标签名,标签名上的属性,监听事件和子元素们以及他们的属性
1.2 虚拟DOM的优点?
1.2.1 减少DOM操作
- 虚拟DOM可将多次操作合并成一次完成,比如:当需要添加1000个节点时,真实DOM需要一个一个的添加,但是虚拟DOM比如vue可以将多个节点放在一个页面一次性添加。
- 虚拟DOM可以借助DOM diff将多余的操作省掉,比如需要添加1000个节点,但是只有10个节点是新增的,虚拟DOM可以通过diff算法,实现只对新增的10个节点进行添加,其他节点不需要任何改动。
1.2.2 实现跨平台渲染
虚拟DOM不仅可以变成DOM,还可以变成小程序,IOS应用
1.3 虚拟DOM的缺点?
唯一的不足是需要额外的创建函数来创建DOM树
1.3.1 Vue和React中的虚拟DOM
Vue 中的虚拟DOM React中的虚拟DOM 1.3.2 Vue和React中的创建虚拟DOM
vue中创建虚拟DOM的 方法 React中创建虚拟DOM的方法 DOM diff
2.1 DOM diff是什么?
是一种函数,是虚拟DOM的对比算法
2.1.1 Tree diff
概念: 将新旧两颗虚拟 DOM 树,按照层级对应的关系,从头到尾的遍历一遍,,就能找到那些元素是需要更新的,这种方式: Tree Diff
2.1.2 Component diff
不同组件之间的对比 概念: 在对比每一个层级的时候,会有自己的组件,这种组件的对比方式就叫: Component Diff ;
这种对比方法其实比较的就是类型.↓↓↓- 如果类型相同,暂时不更新,
- 如果类型不相同,就需要更新; ( 删除旧的组件,再创建一个新的组件,插入到删除组件的那个位置)
2.1.3 Element diff
同一层级中元素之间的对比
概念: 在类型相同的组件内, 再继续对比组件内部的元素,查看内部元素是否相同,如果需要修改,找到需要修改的元素,进行针对性的修改! 这种方式就叫: Element Diff
- 三种节点操作:
- 1 INSERT_MARKUP(插入)
- 2 MOVE_EXISTING(移动)
- 3 REMOVE_NODE(删除)
- INSERT_MARKUP:新的 component 类型不在老集合里,需要对新节点执行插入操作。
- MOVE_EXISTING:老的集合包含新的 component 类型,就需要做移动操作,可以复用以前的 DOM 节点。
- REMOVE_NODE:老的 component 不在新集合里的,需要执行删除操作 或者 老的 component 类型在新集合里也有,但对应的 element 不同则不能直接复用和更新,需要执行删除操作
2.2 DOM diff的优点?
DOM diff算法通过将新的DOM树和旧的DOM树进行比较,只对变化了的部分进行渲染,大大提高了渲染效率
2.3 DOM diff的问题?
需要通过key:id来指定节点
我们在执行操作的时候,只对数组进行了操作,即每一条 Child,而并没有对 Child 的子元素进行操作。而数组的对比是由遍历来的,所以大概的过程就成了下图这样,也就形成了上图的结果
为了避免这种情况的出现了,React 和 VUE 允许开发者对同一层级的同组子节点,添加唯一 key 进行区分,出现了下面这种情况,这次就对了
-
虚拟 DOM 和 DOM diff
2021-01-10 10:47:17虚拟 DOM 和 DOM diff虚拟DOM虚拟DOM的优点虚拟DOM的缺点DOM diffDOM diff优点DOM diff缺点 虚拟DOM 一个能代表DOM树的对象,通常包含标签名、标签上的属性、事件监听、子元素,以及其他属性 虚拟DOM的优点 能减少...虚拟 DOM 和 DOM diff
虚拟DOM
一个能代表DOM树的对象,通常包含标签名、标签上的属性、事件监听、子元素,以及其他属性
虚拟DOM的优点
- 能减少不必要的DOM操作
- 能跨平台渲染
- 记住:虚拟DOM和实际DOM的操作,作比较时,要有具体的例子。实际上实际的DOM操作并不慢,但是很多教科书和资料介绍说DOM操作慢,这个说法太片面
虚拟DOM的缺点
需要额外的创建函数,如createElement或h,但是可通过JXS来简化XML写法
DOM diff
- 虚拟DOM的对比算法
- 把虚拟DOM想象成树型
- 举例一
<div :class="x"> <span v-if="y">{string1}</span> <span>{string2}</span> </div>
-
当数据变化,x从red变为green
-
此时DOM diff发现:
- div标签类型没变,只需要更新div对应的DOM的属性。
- 子元素没变不更新
-
举例二
当数据变化,y从true变为false
DOM diff发现:
div没变,不用更新。
子元素1标签没变,但是children变了,更新DOM 内容
子元素2不见了,删除对应的DOM
DOM diff优点
- 进行同级比较
- 可以跨平台
DOM diff缺点
- 同级比较存在bug
- 解决方案:用Key值进行区分。
-
虚拟DOM和DOMdiff学习笔记
2020-11-02 16:16:48虚拟DOM和DOMdiff 什么是虚拟DOM: 一个能代表DOM数的对象,通常含有标签名,标签上的属性,时间监听和子元素们,以及其他属性。 eg:创建一个虚拟DOM ...虚拟DOM的优点 减少DOM操作 虚拟DOM可以将多次操作合并虚拟DOM和DOMdiff
什么是虚拟DOM:
一个能代表DOM数的对象,通常含有标签名,标签上的属性,时间监听和子元素们,以及其他属性。
eg:创建一个虚拟DOM
createElement('div',{className:'red',onClick:()=>{}},[ createElement('span',{},'span1')]) createElement('span',{},'span1')]) ] )
虚拟DOM的优点
-
减少DOM操作
虚拟DOM可以将多次操作合并为一次操作,比如要添加1000个节点,DOM要操作1000次,但是虚拟DOM一次就可以了,虚拟DOM其实是在优化操作,而不是优化性能。
虚拟DOM借助DOM diff可以把多余的操作省掉,比如添加1000个节点,其实只有10个是新增的,那么虚拟DOM就会只更新10个节点。这一次虚拟DOM是在减少操作的范围
-
跨平台
虚拟DOM不仅可以变成DOM,还可以变成小程序、IOS应用、安卓应用,因为虚拟DOM本质上就是一个JS对象。
虚拟DOM的缺点
需要额外的创建函数,如createElement或h,但是可以通过JSX来简化成XML写法(这种方法严重依赖于打包工具)。
当规格比较小时,虚拟DOM比DOM快,但是当规模比较大时,DOM会更快。
什么是DOM diff
DOM diff的大概逻辑
- Tree diff
- 将新旧两棵树进行逐层对比,找出哪些节点需要更新
- 如果节点是组件就看Cpmponent diff
- 如果节点是标签就看 Element diff
- Component diff
- 如果节点是组件,就先看组件类型
- 类型不同直接替换,(删除旧的)
- 类型相同只更新属性
- 然后深入组件做Tree diff(递归)
- Element diff
- 如果节点是原生标签,则看标签名
- 标签名不同直接替换,相同则只改变属性
- 然后进入标签后做Tree diff(递归)
-
-
react 虚拟dom
2018-07-11 13:51:19react 虚拟dom的优点:数据渲染到页面的方式: 1).手动for循环整个数组; 2).使用模板引擎; 缺点:性能上的问题比较严重 列如:列表的排序等,需要重新渲染页面的某个需求,重新渲染页面的性能。如何提高性能? ...react 虚拟dom的优点: 数据渲染到页面的方式: 1).手动for循环整个数组; 2).使用模板引擎; 缺点:性能上的问题比较严重 列如:列表的排序等,需要重新渲染页面的某个需求,重新渲染页面的性能。 如何提高性能? 按需渲染:只更新数据变化的那一条数据(DOM树)。 原理:获取内存中的新旧两颗DOM树,进行对比,把数据发生变化的进行按需更新 如何获取新旧两颗DOM树?实现对比? 因为浏览器中并没有直接提供获取DOM树的api;因此我没无法拿到浏览器内存中的DOM树;所以只能手动模拟DOM树; 怎么模拟DOM树? 利用js:其实也是面向对象思想。比如我们要模拟 '<div class="testDiv" name="我是DIV">我是div<h1>嵌套H1</h1><div>' /*模拟部分*/ var div = { tagName:'div', attrs:{ class:'testDIv', name:'我是DIV' }, childrens:[ "我是DIV", { tagName:'h1', attrs:{}, childrens:[ '嵌套H1' ] } ] } /*如果部分数据发生更新*/ var div = { tagName:'div', attrs:{ class:'testDIv', name:'我是DIV' }, childrens:[ /*这条数据发生变话。只需要标记这条数据即可*/ "我是DIV1231231231231231231231231", { tagName:'h1', attrs:{}, childrens:[ '嵌套H1' ] } ] } 以上就是react的虚拟dom的原理和优点; (本质:就是利用js对象的行为来模拟页面上DOM的嵌套关系就是虚拟DOM)从而实现高效更新; 怎么实现对比呢? Diff算法; tree diff:新旧两颗DOM树逐层对比的过程就是Tree Diff;当整颗DOM树对比完毕,则所有需要更新的元素,必然能够找到。 (组件对比-每一层的对比(component diff)),元素对比(element diff));
-
虚拟DOM
2019-06-10 20:48:00首先来了解下虚拟DOM的概念是什么。虚拟DOM是一个真实的JavaScript对象,是一个有JavaScript模拟的DOM结构树。 那么虚拟DOM有哪些优缺点呢? 优点:1、更高效;2、可复用;3、减少对实际DOM的操作; 缺点... -
62-【框架】虚拟DOM和DOM diff
2020-09-17 19:39:54但是任何基于虚拟DOM的库都不可能在操作DOM时比DOM快 DOM操作并不慢,相当于js执行时间,但是浏览器渲染页面时,并无法进行交互,而是页面渲染时长较长 当节点较小时,默认是Reac快,但是太大还是DOM更稳定,vue... -
虚拟DOM与DOM Diff 的原理
2020-11-30 11:50:32虚拟DOM 虚拟DOM是和真实DOM相互对应的 它是什么 一个能代表 DOM 树的对像,它通常含有标签名、标签上的属性、事件监听和子元素等,以及其他属性。 它有什么优点(为什么用它) 1、减少DOM的操作: 虚拟DOM 可以... -
Vue源码解析04——手写虚拟DOM
2019-11-15 09:10:40手写虚拟DOM 什么是虚拟DOM ...虚拟DOM的优点 虚拟DOM轻量、快速。当虚拟DOM发生变化时通过新旧虚拟DOM的对比,得到最小的DOM操作量,从而提升性能和用户体验。 跨平台:虚拟DOM是可以实现跨平台的,将... -
【虚拟DOM】【key值】 【DOM diff】
2021-01-08 19:26:45虚拟DOM的优点 key值的用处 虚拟DOM DOM:将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。 VDOM:也叫虚拟DOM,它是仅存于内存中的DOM,因为还未展示到页面中,所以称为VDOM。 var a =... -
虚拟DOM 和 DOM diff
2020-09-13 23:52:59二、虚拟DOM有什么优点 1. 减少DOM操作 虚拟DOM可以将多次操作合并为一次操作。 虚拟DOM借助DOM diff 可以将多余的操作省略 2. 跨平台 虚拟DOM不仅可以变成DOM,还可以变成小程序、iOS应用,因为虚拟DOM本质是JS... -
虚拟DOM和DOM diff
2021-02-06 15:50:31虚拟DOM优点 减少DOM操作 虚拟 DOM 可以将多次操作合并为一次操作,比如你添加 1000 个节点,却是一个接一个操作的(减少频率) 虚拟 DOM 借助 DOM diff 可以把多余的操作省掉,比如你添加 1000 个节点,其实只有 ... -
虚拟的DOM与DOM diff
2020-10-03 10:25:451.关于DOM的谣言 2.虚拟DOM优点 3.虚拟DOM是什么样子的 react vue 4.如何创建虚拟DOM 5.创建虚拟DOM的方便方法 6.虚拟DOM是什么,虚拟DOM优点,缺点 7.diff的实现基本思路 8.小结 -
关于虚拟dom的理解
2020-07-03 14:48:21虚拟dom的理念:建立一个javascript plain object,非常轻量,用它保存我们真正关心的与dom相关的少数数据;对它进行操作,然后对比操作前后的差异,再根据映射关系去操作真正的dom,无疑能提高性能。 虚拟dom优点... -
虚拟 DOM 的优缺点?
2020-11-30 10:35:24当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中, 反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素... -
React虚拟Dom
2020-06-11 19:41:09react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树,在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新... -
虚拟DOM中的diff算法
2020-05-15 11:22:34什么是虚拟DOM,它的优点 大家知道,我们页面渲染,首先需要构建一个DOM树,用render进行DOM的渲染,传统开发中,每当DOM树中的元素发生改变,都需要重新进行一遍DOM的比对,并且进行真实DOM的渲染,这样是非常损耗... -
虚拟DOM相关整理
2020-11-10 09:56:08什么是虚拟DOM操作,优缺点什么1.1虚拟DOM优点:1.1.1 减少DOM操作1.1.2 跨平台1.2虚拟DOM缺点:2.什么是DOM diff 本章内容,是看过B站视频面试大厂必问:虚拟DOM与DOM Diff 的原理之后自己整理的,只用于自己知识的... -
在虚拟 DOM 中设置 Key 的作用和优点
2020-07-28 21:30:45在v-for的过程中,为给每一个节点设置key属性的作用: 以便它能够跟踪每个节点的身份,在进行比较的时候,会基于 key 的变化重新排列元素顺序。...可以减少 dom -
react 虚拟dom 的原理简单理解
2018-03-29 18:55:59在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新diff 到真实DOM 上优点:最终真实DOM 就只更新了diff 部分,... -
虚拟dom及其优劣
2019-04-29 16:36:57当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,... -
vue虚拟DOM和diff算法
2021-01-08 17:17:46虚拟dom借助Dom diff 可以吧多余的操作省掉,比如添加1000个节点,只有10个是新增的(检测原有的就添加没有的10个) 2.跨平台 虚拟dom不仅可以变成dom ,还可以变成小程序,ios应用,安卓应用,因为虚拟dom本质上... -
React中的虚拟DOM&Diff算法
2021-02-15 22:32:39文章目录虚拟DOM概念如何重新渲染页面优点虚拟DOM中的Diff算法Diff算法特点key值的引入 虚拟DOM 概念 虚拟DOM其实就是一个JS对象,用它来描述真实的DOM 如何重新渲染页面 数据发生变化,如: <div id='root'> ... -
虚拟Dom和Diff算法
2020-03-24 22:35:47虚拟Dom和Diff算法 首先,我们需要了解什么是虚拟Dom,又为...我们之所以是使用Dom必定是因为他存在一定的优点,在我们用传统的方式操作Dom的时候,我们的浏览器会从构建DOM树开始从头到尾执行一遍过程,效率较低。... -
对虚拟DOM的一点理解
2018-10-07 22:21:24起因:DOM的操作是很慢的,每次涉及到的状态改变都会重新进行DOM操作。 怎么去进行性能优化?(整体的思想是减少对DOM的操作) 1).既然DOM操作很慢,那就不用DOM 优点:性能全面提升 最开始有个公司提出了一个... -
虚拟Dom和diff算法
2021-01-14 13:53:17虚拟Dom 概念:虚拟Dom本质就是js对象,用js来模拟DOM中的节点。一个能代表dom树的对象,...虚拟dom借助Dom diff 可以吧多余的操作省掉,比如添加1000个节点,只有10个是新增的(检测原有的就添加没有的10个) 2.跨平 -
vue虚拟dom解读
2019-08-30 18:08:11vue的优点3.1 操作真实dom的代价3.2 虚拟dom的好处3.4 虚拟dom的创建及最终转化为真实dom3.3 diff算法 1. 浏览器渲染页面的过程 输入url地址–>访问dns域名解析服务器解析url地址为ip地址–>找到该ip地址下的...
-
宽频谱红外上转换材料CaS∶Eu,Sm的快速合成及表征
-
虚幻4引擎基础
-
中原消费金融推借贷冷静期:给用户更优选择,以“加法”换未来
-
个人发卡4套模板.zip
-
conda 指令
-
nlw04:aplicação“ move.it”-Desenvolvido durante在火箭队的下一个级别周-源码
-
竞争性程序设计-源码
-
MySQL 性能优化(思路拓展及实操)
-
Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ 报错解决
-
node-cron:NodeJS的Cron-源码
-
戴着锁链跳舞
-
如何在LoadRunner中监控Oracle数据库
-
CYCLOPS:周期性结构的周期性排序(CYCLOPS),用于研究人体组织中的昼夜节律-源码
-
SecureCRT 连接 GNS3/Linux 的安全精密工具
-
Linux安装java常用开发docker环境
-
电影API-源码
-
ipv6免内网穿透使用树莓派4搭建云服务器
-
SE-ML-Algorithms-DataStruc:在软件工程与机器学习中尝试一些简单的练习,算法,数据结构和软件模式。 语言会有所不同,包括Python,Java,CC ++,R,Julia,Golang,Haskell,Scala,Javascript,Matlab和SQL-源码
-
最新java map集合面试题
-
data-analysis-using-python:使用Python进行数据分析:具有NYC开放数据的初学者指南-源码