精华内容
下载资源
问答
  • 虚拟DOM优点

    2021-05-26 00:03:07
    1.直接操作DOM是很消耗性能的,会频繁触发重绘回流,且在浏览器上有一次...虚拟DOM是批处理的,完成后才会只触发一次重绘回流。 2.比较差异,以最小的代价去操作DOM,提高无用的消耗 总结一下就是高性能,低代价 ...

    1.直接操作DOM是很消耗性能的,会频繁触发重绘回流,且在浏览器上有一次DOM改变就操作一次,很有可能前面和后面所作的改变是冲突的,那前面做的那次改变就是无意义的。虚拟DOM是批处理的,完成后才会只触发一次重绘回流。
    2.比较差异,以最小的代价去操作DOM,提高无用的消耗
    总结一下就是高性能,低代价

    展开全文
  • 虚拟dom优点

    2021-03-11 14:52:03
    复杂场景下,可以提高性能 虚拟dom中的patch函数可以传递不同平台的api,即虚拟dom优点之一是可以跨平台。
    • 复杂场景下,可以提高性能
    • 虚拟dom中的patch函数可以传递不同平台的api,即虚拟dom优点之一是可以跨平台。
    展开全文
  • 虚拟DOM和DOM diff

    2021-02-06 15:50:31
    虚拟DOM优点 减少DOM操作 虚拟 DOM 可以将多次操作合并为一次操作,比如你添加 1000 个节点,却是一个接一个操作的(减少频率) 虚拟 DOM 借助 DOM diff 可以把多余的操作省掉,比如你添加 1000 个节点,其实只有 ...

    虚拟DOM优点

    减少DOM操作

    • 虚拟 DOM 可以将多次操作合并为一次操作,比如你添加 1000 个节点,却是一个接一个操作的(减少频率)
    • 虚拟 DOM 借助 DOM diff 可以把多余的操作省掉,比如你添加 1000 个节点,其实只有 10 个是新增的(减少范围)

    跨平台

    • 虚拟 DOM 不仅可以变成 DOM,还可以变成小程序、iOS 应用、安卓应用,因为虚拟 DOM 本质上是一个 JS 对象

    React虚拟DOM

    // React
    const vNode = {
      key: null,
      props: {
        children: [  // 子元素们
           { type: 'span', ... }, 
           { type: 'span', ... }
        ],
        className: "red" // 标签上的属性
        onClick: () => {} // 事件
      },
      ref: null,
      type: "div", // 标签名 or 组件名
      ...
    }
    

    Vue虚拟DOM

    // Vue
    const vNode = {
      tag: "div", // 标签名 or 组件名
      data: {
        class: "red", // 标签上的属性
        on: {
          click: () => {} // 事件
        }
      },
      children: [ // 子元素们
        { tag: "span", ... },
        { tag: "span", ... }
      ],
      ...
    }
    

    如何创建虚拟DOM

    // React.createElement
    createElement('div',{className:'red',onClick:()=> {}},[
        createElement('span', {}, 'span1'),
        createElement('span', {}, 'span2')
      ]
    )
    // Vue(只能在 render 函数里得到 h)
    h('div', {
      class: 'red',
      on: {
        click: () => { }
      },
    }, [h('span',{},'span1'), h('span', {}, 'span2'])
    

    使用JSX简化

    // React JSX
    <div className="red" onClick="{()=> {}}">
        <span>span1</span>
        <span>span2</span>
    </div>
    // Vue Template
    h('div', {
      class: 'red',
      on: {
        click: () => { }
      },
    }, [h('span',{},'span1'), h('span', {}, 'span2'])
    
    // React
    <div className="red" onClick={fn}>
        <span>span1</span>
        <span>span2</span>
    </div>
    // 通过 babel 转为 createElement 形式
    // Vue Template
    <div class="red" @click="fn">
      <span>span1</span>
      <span>span2</span>
    </div>
    // 通过 vue-loader 转为 h 形式
    
    // 现在创建虚拟 DOM 的方法
    // React
    <div className="red" onClick={fn}>
        <span>span1</span>
        <span>span2</span>
    </div>
    // 通过 babel 转为 createElement 形式
    // Vue Template
    <div class="red" @click="fn">
      <span>span1</span>
      <span>span2</span>
    </div>
    // 通过 vue-loader 转为 h 形式
    

    总结

    虚拟 DOM 是什么

    • 虚拟dom的本质一个能代表dom树的JS对象,包含tag、props、children三个属性
    • 通常含有标签名、标签上的属性、事件监听和子元素们,以及其他属性

    虚拟 DOM 有什么缺点

    • 需要额外的创建函数,如 createElement 或 h,但可以通过 JSX 来简化成 XML 写法,会依赖打包工具。

    DOM diff

    /* 
     什么是 DOM diff
     就是一个函数,我们称之为 patch
     patches = patch(oldVNode, newVNode)
     patches 就是要运行的 DOM 操作,可能长这样:
    */
    [
      {type: 'INSERT', vNode: ... },
      {type: 'TEXT',  vNode: ... },
      {type: 'PROPS', propsPatch: [...]}
    ]
    

    Tree diff

    • 将新旧两棵树逐层对比,找出哪些节点需要更新
    • 如果节点是组件就看 Component diff
    • 如果节点是标签就看 Element diff

    Component diff

    • 如果节点是组件,就先看组件类型
    • 类型不同直接替换(删除旧的)
    • 类型相同则只更新属性
    • 然后深入组件做 Tree diff(递归)

    Element diff

    • 如果节点是原生标签,则看标签名
    • 标签名不同直接替换,相同则只更新属性
    • 然后进入标签后代做 Tree diff(递归)

    存在一些小小的问题

    DOM diff在同层级对比中有bug。造成页面渲染错误。
    同一层级的一组节点可以通过唯一的id进行区分, 所以可以给节点设定唯一的key。
    从而消除bug。key只能是number和string类型,一定不要用index作为key值。

    展开全文
  • 虚拟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 的原理之后自己整理的,只用于自己知识的...


    本章内容,是看过B站视频 面试大厂必问:虚拟DOM与DOM Diff 的原理之后自己整理的,只用于自己知识的补充。
    通常说的,DOM操作慢,是对比于JS原生API,如数组操作。

    1.什么是虚拟DOM操作,优缺点什么

    虚拟DOM是一个能代表DOM树的对象,通常含有标签名,标签上的属性,事件监听和子元素们,以及其他属性。

    1.1虚拟DOM优点:

    虚拟DOM优点:减少DOM操作,跨平台

    1.1.1 减少DOM操作

    1)虚拟DOM可以将多次操作合并为一次操作,比如:你添加1000个节点,js原生是一个一个添加的,而虚拟DOM是一次性添加到页面上,本质减少DOM操作的次数
    2)虚拟DOM借助DOM diff可以把多余的操作省掉,比如你添加1000个节点,其中只有10个是新增的,通过diff算法发现其中990个是之前页面就有的,只有10个是新增的,那么就只会新增10个,本质减少了dom操作的范围

    1.1.2 跨平台

    虚拟DOM 不仅可以应用于浏览器,小程序,安卓应用,IOS应用都可以使用,虚拟DOM本质上是一个JS对象。

    1.2虚拟DOM缺点:

    需要额外的创建函数,react(creatElement) vue(h),但可以通过JSX/vue-loader 进行转义成XML写法。(缺点:过分依赖打包工具)

    2.什么是DOM diff

    就是一个函数,称之为patch

    const patches = patch(oldVnode,newVnode) 
    

    patches 就是要运行的DOM操作,插入,修改内容,更新属性等。

    DOM diff主要逻辑:
    Tree diff
    将新旧两棵树进行逐层对比,找出哪些节点需要更新;
    如果节点是组件就看 Component diff;
    如果节点是标签就看Element diff;
    Component diff
    如果节点是组件,就先看组件类型;
    如果类型不同直接替换,类型相同则只更新属性;
    然后深入组件做Tree diff ;
    Element diff
    如果节点是原生标签,则看标签名;
    标签名不同则直接替换,相同则只更新属性;
    然后进入标签做Tree diff.

    展开全文
  • 虚拟dom

    2021-09-28 18:17:47
    文章目录什么是虚拟dom虚拟dom优点虚拟dom的缺点 什么是虚拟dom 一个能代表dom树的对象,通常含有标签名、标签上的属性、事件监听和子元素们,以及其他属性 虚拟dom优点 减少dom操作 虚拟dom可以将多次操作...
  • 虚拟DOM

    2021-08-24 20:44:20
    虚拟DOM React框架的核心优势之一, 就是支持创建虚拟DOM来提高页面性能。那么, 什么是虚以DOM呢?其实, 虚拟DOM这个概念很早就被提出来了, 是相对于实际DOM而言的。 设计人员在设计传统HTML网页的UI时, 都会在...
  • 虚拟 DOMDOM diff

    2021-09-02 19:33:18
    虚拟DOM长什么样子: 如何创建虚拟DOM 用 JSX 简化创建虚拟 DOM 现在创建虚拟DOM的方法 虚拟 DOM 的缺点 DOM diff 是什么 DOM diff 的优点 DOM diff 的问题(key) 虚拟 DOM 是什么 一个能代表 DOM 树的...
  • 虚拟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

    2021-04-27 11:44:43
    虚拟DOM的作用:使用原生js或者jquery写页面的时候会发现操作DOM是一件非常麻烦的一件事情,往往是DOM标签和js逻辑同时写在js文件里,数据交互时不时还要写很多的input隐藏域,如果没有好的代码规范的话会显得代码...
  • 关于虚拟dom的理解

    2020-07-03 14:48:21
    虚拟dom的理念:建立一个javascript plain ...虚拟dom优点:将dom操作封装好,建立数据-->dom的映射,将开发人员从dom操作中解放出来,只需要关注数据本身即可,框架自动帮助开发人员将数据的变化更新到dom上。 ...
  • 虚拟DOM 和 DOM diff

    2020-09-13 23:52:59
    二、虚拟DOM有什么优点 1. 减少DOM操作 虚拟DOM可以将多次操作合并为一次操作。 虚拟DOM借助DOM diff 可以将多余的操作省略 2. 跨平台 虚拟DOM不仅可以变成DOM,还可以变成小程序、iOS应用,因为虚拟DOM本质是JS...
  • 虚拟 DOM 是最近非常火的技术,两大著名前端框架 React 和 Vue 都使用了虚拟 DOM,所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了,React 和 Vue 框架本身所蕴含的知识点非常多,而且也...
  • 虚拟 DOM &DOM diff

    2021-05-12 11:54:04
    虚拟 DOM 是什么 一个能代表DOM树的对象,通常...虚拟DOM可以借助DOM diff将多余的操作省掉,比如需要添加1000个节点,但是只有10个节点是新增的,虚拟DOM可以通过diff算法,实现只对新增的10个节点进行添加,其他节点
  • 直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚拟DOM产生全新的虚拟DOM...
  • 虚拟DOM优点2. 虚拟DOM缺点3.JS操作真实DOM三. diff算法1.什么是diff算法2.diff算法大概逻辑3.diff算法步骤4. diff算法优缺点 一. 什么是虚拟DOM 用js来模拟DOM中的节点。一个能代表dom树的对象,通常含有标签名,...
  • 小白浅谈虚拟DOM

    2021-08-24 21:25:57
    二、虚拟DOM优点 (1)减少DOM的操作 减少DOM的操作的次数:虚拟DOM可以将多次操作合并为一次操作,比如添加1000个节点,却是一个一个操作的,虚拟DOM则是往数组中添加一千个文本,虚拟DOM可以合并为一次 减少DOM...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,906
精华内容 5,162
关键字:

虚拟dom的优点