精华内容
下载资源
问答
  • 虚拟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

    098bf3b70d33229feefbb39404934503.png
    Vue 中的虚拟DOM

    1c7e851ce9d897e48c3e6501a894f30a.png
    React中的虚拟DOM

    1.3.2 Vue和React中的创建虚拟DOM

    173f7d5b7ea8d3a7f4e88d8cedef5bf6.png
    vue中创建虚拟DOM的 方法

    9593f5e952f5e054616ac23f52ba1e28.png
    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来指定节点

    ca0944992b23cace5dd2b1c2a249f52e.png

    7f959ea8877307446a12a921e4bf1973.png

    我们在执行操作的时候,只对数组进行了操作,即每一条 Child,而并没有对 Child 的子元素进行操作。而数组的对比是由遍历来的,所以大概的过程就成了下图这样,也就形成了上图的结果

    0089215d8a20007e25a243c13977b157.png

    为了避免这种情况的出现了,React 和 VUE 允许开发者对同一层级的同组子节点,添加唯一 key 进行区分,出现了下面这种情况,这次就对了

    ef655891b643657ee253d4eca05d5a24.png
    展开全文
  • 虚拟 DOMDOM diff

    2021-01-10 10:47:17
    虚拟 DOM 和 DOM diff虚拟DOM虚拟DOM的优点虚拟DOM的缺点DOM diffDOM diff优点DOM diff缺点 虚拟DOM 一个能代表DOM树的对象,通常包含标签名、标签上的属性、事件监听、子元素,以及其他属性 虚拟DOM的优点 能减少...

    虚拟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发现:

      1. div标签类型没变,只需要更新div对应的DOM的属性。
      2. 子元素没变不更新
    • 举例二
      当数据变化,y从true变为false
      在这里插入图片描述
      DOM diff发现:
      div没变,不用更新。
      子元素1标签没变,但是children变了,更新DOM 内容
      子元素2不见了,删除对应的DOM

    DOM diff优点

    • 进行同级比较
    • 可以跨平台

    DOM diff缺点

    • 同级比较存在bug
    • 解决方案:用Key值进行区分。
    展开全文
  • 虚拟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:19
    react 虚拟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的操作;  缺点...
  • 但是任何基于虚拟DOM的库都不可能在操作DOM时比DOM快 DOM操作并不慢,相当于js执行时间,但是浏览器渲染页面时,并无法进行交互,而是页面渲染时长较长 当节点较小时,默认是Reac快,但是太大还是DOM更稳定,vue...
  • 虚拟DOM 虚拟DOM是和真实DOM相互对应的 它是什么 一个能代表 DOM 树的对像,它通常含有标签名、标签上的属性、事件监听和子元素等,以及其他属性。 它有什么优点(为什么用它) 1、减少DOM的操作: 虚拟DOM 可以...
  • 手写虚拟DOM 什么是虚拟DOM ...虚拟DOM的优点 虚拟DOM轻量、快速。当虚拟DOM发生变化时通过新旧虚拟DOM的对比,得到最小的DOM操作量,从而提升性能和用户体验。 跨平台:虚拟DOM是可以实现跨平台的,将...
  • 虚拟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 个节点,其实只有 ...
  • 虚拟的DOMDOM diff

    2020-10-03 10:25:45
    1.关于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:09
    react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树,在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同地方diff ,然后把diff放到队列里面,然后批量更新...
  • 虚拟DOMdiff算法

    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 原理之后自己整理,只用于自己知识...
  • 在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本质上...
  • 文章目录虚拟DOM概念如何重新渲染页面优点虚拟DOMDiff算法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:11
    vue的优点3.1 操作真实dom的代价3.2 虚拟dom的好处3.4 虚拟dom的创建及最终转化为真实dom3.3 diff算法 1. 浏览器渲染页面的过程 输入url地址–>访问dns域名解析服务器解析url地址为ip地址–>找到该ip地址下的...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 293
精华内容 117
关键字:

虚拟dom的优点