精华内容
下载资源
问答
  • 虚拟dom

    2020-03-23 22:43:14
    使用虚拟DOM有什么好处? 操作数据要大大的减少性能损耗,提高渲染效率 越多的真实dom操作,越损耗性能 2.虚拟DOM为什么会提高性能? 虚拟DOM提高性能,不是说不操作DOM,而是减少操作DOM的次数,减少回流和重绘 ...

    一、什么是虚拟DOM?
    使用javascript模拟了DOM结构的树形结构(对象表示),这个树结构包含整个DOM结构的信息
    使用虚拟DOM有什么好处?
    操作数据要大大的减少性能损耗,提高渲染效率
    越多的真实dom操作,越损耗性能
    2.虚拟DOM为什么会提高性能?
    虚拟DOM提高性能,不是说不操作DOM,而是减少操作DOM的次数,减少回流和重绘

    虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能

    1)用 JavaScript 对象结构表示 DOM 树的结构;

    2)然后用这个树构建一个真正的 DOM 树,插到文档当中

    3)当状态变更的时候,重新构造一棵新的对象树

    4)然后用新的树和旧的树进行比较,记录两棵树差异

    5)所构建的真正的 DOM 树上,视图就更新了
    虚拟dom的实现:

    let element={
        tagName:'div',//节点标签名
        props:{//dom的属性,用一个对象存储键值对
            id:'list'
        },
        children:[//该节点的子节点
            {tagName:'li',props:{class:'item'},children:['aa']},
            {tagName:'li',props:{class:'item'},children:['bb']},
            {tagName:'li',props:{class:'item'},children:['cc']}
        ]
    }
    对应的html写法是:
    <div id='list'>
        <li class='item'>aa</li>
        <li class='item'>aa</li>
        <li class='item'>aa</li>
    </div>
    

    二、实现虚拟DOM
    使用diff算法比较新旧虚拟DOM----即比较两个js对象不怎么耗性能,而比较两个真实的DOM比较耗性能,从而虚拟DOM极大的提升了性能!
    在这里插入图片描述

      let myp = document.getElementById("myp")
             console.time("temp")
            for(var i=0;i<10000;i++){
                let num = myp.innerHTML*1
               myp.innerHTML = ++num
            }
            console.timeEnd("temp")
    
    let myp = document.getElementById("myp")
             let num = 1
             console.time("temp")
             for(var i=0;i<10000;i++){
                 num++
             }
             myp.innerHTML = num
             console.timeEnd("temp")
    

    diff算法:
    diff算法指的就是两个虚拟DOM作比对,在diff算法中有个概念就是同级比对,首先比对顶层虚拟DOM节点是否一致,如果一样就接着比对下一层,如果不一样,就停止向下比对,将原始页面中这个DOM及 下面的DOM全部删除掉,重新生成新的虚拟DOM,然后替换掉原始页面的DOM在这里插入图片描述
    左图:简单粗暴的做法是:卸载C,装载F,卸载D,装载C,卸载E,装载D,装载E。虽然程序运行不会有错,但效率太低
    右图:增加上key后,React就能根据key,直接找到具体的位置进行操作,效率比较高

    列表中key的作用:

    1)key是React用于跟踪哪些元素是增加、删除、修改的辅助标记,需要保证在同级元素中key的唯一性

    2) React Diff 算法借助元素的 Key 值判断元素是新增、删除、修改,从而减少不必要的元素重渲染。

    3)React 还需要借助 Key 值来判断元素与本地状态的关联关系

    展开全文
  • React虚拟DOM好处

    2018-12-14 15:17:44
    关于React提供的虚拟DOM好处有一些困惑和误解需要阐明。 我们总是或多或少的听说过直接操作DOM是低效和缓慢的。然而,我们几乎没有可用的数据来支持这个观点。关于React虚拟DOM的令人愉悦的地方在于web开发过程中...

    关于React提供的虚拟DOM的好处有一些困惑和误解需要阐明。

    我们总是或多或少的听说过直接操作DOM是低效和缓慢的。然而,我们几乎没有可用的数据来支持这个观点。关于React虚拟DOM的令人愉悦的地方在于web开发过程中,它采用了更加高效的方式来更新view层。

    我们把使用React的其他好处姑且放到一边,例如单项绑定和组件化。本节我讲详细的讨论一下虚拟DOM,随后公正的抉择为什么使用React而不是其他UI库(或者任何UI库都不使用)。

    为什么需要UI库

    在反应式的系统中两个最重要的idea应该是事件驱动和对数据变化的响应。

    DOM用户接口组件有内部状态,当无论何时有情况发生变化的时候,更新浏览器并不是像简单的重新生成DOM那么简单。举个例子,如果Gmail曾经这么做的话,因为浏览器窗口为了显示新的信息,需要不断的刷新整个页面,如果你正在写邮件的话,所有的都会被清除,你一定会经常恼怒不已。

    DOM的这种状态方式决定了为什么我们需要一个用户界面库,因为这些库提供了一些解决方案,例如键/值 观察(在Ember库中使用了此方法),或者脏值检测(Angular使用了此方法)。UI库可以观察数据模型的改变,然后在改变发生的时候只改变对应的部分DOM,或者观察DOM改变,然后更新数据模型。

    这种观察和更新的模式叫做双向绑定,这种方式常常让与用户界面的工作更加复杂和让人困惑。

    React的不同之处

    React的虚拟DOM与其他库的不同之处在于从程序员的角度看,这种模式更加的简单。你只需要写纯javascript,然后更新React组件,React将为你更新DOM。数据绑定并没有和应用程序搅和在一起。

    React使用单向数据绑定使得事情变得更加简单,每一次在ReactUI的input域中输入内容,React并不直接改变状态。相反,React更新数据模型,随后引起UI更新,你输入的文字将在域中出现。

    DOM真的慢吗?

    关于虚拟DOM的很多演讲和文章都指出,尽管现在jiavascript的引擎已经很快了,但是读取和写入浏览器的DOM还是很慢,

    这不是特别的准确。DOM是很快的。增加和去除DOM节点就是设置一些javascript对象的属性,这才是简单的操作,这并不是需要做很多的工作。

    真正慢的地方自在于,每次DOM改变的时候,都需要在浏览器中进行渲染。每一次DOM改变的时候,浏览器都需要重新计算CSS,进行布局处理,然后重新渲染页面。这都需要时间。

    浏览器的开发者持续不断的工作来缩短渲染页面的时间。最关键的需要完成的事情是最小化DOM改变,然后批处理DOM变化,在必要的时候才重新渲染页面。(目前原生浏览器还是无法做到)

    这种批处理DOM改变的策略,把我们提升到了一个更加抽象的层次,这也是React虚拟DOM背后的idea。

    虚拟DOM是怎么工作的?

    与真实DOM相似,虚拟DOM也是节点树,以对象的形式列出内容,属性。React的render方法从React组建中创建节点树,因为动作改变等引起数据模型变化的时候,React更新节点树。

    每次React app内部的数据改变,用户界面的虚拟DOM都会构建。

    这里就是最有趣的地方,在React中更新浏览器DOM需要三步: 1. 每次数据模型变化的时候,虚拟DOM节点树都会重新构建。 2. React依赖某个算法(称之为diff算法)来与上一个虚拟DOM节点数进行比较,只有在不同的情况下才重新进行计算。 3.所有的变化要经过批处理,完成之后,真实DOM才进行更新。

    虚拟DOM慢吗?

    有人认为只要有一点改变就重新构造整个虚拟DOM节点树有点浪费,但是他没有提及一个事实,React在内存中存储有两个虚拟DOM树。

    但是,真实情况是渲染虚拟DOM总是比直接渲染浏览器DOM快。这种论断与你使用的浏览器也没多大的关系。

    我们看一些数据

    我不会做一些基准测试,因为已经有很多开发者创建了很多测试来搞清楚React虚拟DOM方法是否比原生的DOM渲染更加快速。但是频繁的结论显示似乎不是这样,但是因为很多测试都是不实际的,所以这些测试结果也无关紧要。

    简单来说,虚拟DOM就是把所有浏览器为了最小化DOM操作,这些对于开发者来说透明的操作进行了抽象。这层额外的抽象的缺点就是增加了CPU的开销。

    这里有一个"hello,world"的例子,使用了原生的DOM操作:

    随后我们在React中做相同的事情。在这里请注意我们需要包含React,React DOM 和babel,其中babel负责把在render方法中的类XML的代码进行转换成原生的javascript。

    结果显示,本地方法更加的快速。这并不是开玩笑,让我们看一下证据。

    这里是加载和渲染真实DOM的性能分析图。(来源于Chrome)

    这里是在同样的浏览器中加载和展示React的"hello,world"应用时间线。

    请注意本质上来说,事情是相同的。React比直接操作DOM慢,而且慢了很多。那么,与jQuery比又如何呢?

    从分析图中,我们可以看到,jQuery进行展示最简单的hello,world的应用比原生的纯javascript满了50毫秒,但是jQuery版本和原声版本都是React的3倍。

    所以,很清晰,如果要说哪一个更快,原生的javascript和jQuery无疑略胜一筹。

    但是,使用库总是要比不使用库慢一些,这显然是再正常不过了,在内存里进行构建DOM,然后再进行真实的DOM操作更慢,也是很符合逻辑的情况。

    废话说多了,现在让我们准确思考一下,怎么使得虚拟DOM加载更快。

    怎么使用虚拟DOM

    我的"hello world"项目对于React来说是不公平的,原因在于他们仅仅处理的是初次渲染页面的性能比较。React设计的目的是用来更新网页。

    因为虚拟DOM的存在,每一次数据模型的改变都会触发虚拟用户接口的刷新。这与其他库进行直接的DOM更新是不一样的。虚拟DOM实际上使用了更少的内训,因为它不需要在内存中设置观察者。

    然而,每一次动作发生的时候,在内存中比较虚拟DOM也是低效的。这需要大量的CPU运算。

    因为这个愿意,React开发者在决定需要渲染什么的时候并不是完全被动的。如果你知道特定的动作不会影响特定的组件,你可以告诉React不要去分析组件差别,这无疑可以大大节省资源,加快应用程序的性能。示范操作中的React程序是可以进行性能提升的。

    真实情况是,没办法准确的知道虚拟DOM是否比直接进行DOM操作更快。因为这依赖于很多变量,尤其是和你怎么优化程序密切相关。

    这并不是革命性或者令人惊讶的事情,每个人使用的工具都是挺好的。React和虚拟DOM给予我们的,是用一种简单的方式进行UI渲染,它提供给我们一种更加简便的方式来更新浏览器。这种简化可以大大释放我们的脑力负担,使得优化用户界面更加的容易。这才是React真正好处所在的地方,如果处理得到,使用React,兼具性能和生产力,何乐而不为呢?

    原文地址:www.accelebrate.com/blog/the-re…

    作者: Chris Minnick

    说明:原文有一处举了一个100000个墨西哥玉米卷的例子,只是想说明不用每一次拿一个玉米卷,而是等待想拿的玉米卷确定之后然后在进行运输到自己国家进行消费。本质上还是映射React的工作方式,原文闲的稍加啰嗦,有删节。

    总结: 本文核心有两点:1.稍微介绍一下React的虚拟DOM和原生DOM的区别和联系。2.文末点出,虚拟DOM如果处理得到,是可以处理好性能问题的,但是React的真正好处在于,它的模块化思想,释放了生产力。

    颠覆:文中有几个观点需要重新审视,我们也经常听说直接操作DOM是低效的,但是这种低效在什么地方,似乎也没有国内的开发者进行准确的数据论证比较,作者给出了它的解释,直接操作DOM并不低效,低效的地方在于渲染页面的过程繁杂浪费时间,相比于React批处理之后只渲染一遍无疑是高效了很多。

    转载于:https://juejin.im/post/5c13b169e51d4556a446276f

    展开全文
  • react虚拟dom解读

    2019-04-16 16:09:51
    二、浏览器呈现页面机制虚拟dom有什么好处功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...

    什么是虚拟dom?

    一、DOM是什么?

    DOM 全称是 Document Object Model,也就是文档对象模型。说白了,DOM对象本身也是一个js对象,所以严格说,并不是操作dom这个对象慢,而是操作这个对象后,会触发浏览器的一些行为。例如:布局(layout)和绘制(paint。

    二、浏览器呈现页面机制

    浏览器的主要组件包括:

    1、用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面。
    浏览器引擎 - 在用户界面和渲染引擎之间传送指令。

    2、渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。

    3、网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。

    4、用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。

    5、JavaScript 解释器。用于解析和执行 JavaScript 代码,比如chrome的javascript解释器是V8。

    6、数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库
    在这里插入图片描述浏览器

    虚拟dom有什么好处

    展开全文
  • 虚拟DOM

    2021-04-20 16:33:38
    一:概念 虚拟dom(VNode) 虚拟:假的,不真实的dom ...三:为什么在vue中会用到虚拟dom 两点好处: 1.虚拟dom比真是dom体积小,操作时相对来说消耗性能少。如果在页面要删除一个dom,会不会引起页面重绘? 会,它很可

    一:概念

    虚拟dom(VNode) 虚拟:假的,不真实的dom

    二:真是dom和虚拟dom的区别

    真实dom

    虚拟dom

    区别:

    真实dom是一个对象,它的属性非常多,在浏览器中做dom操作相对来说,会比较消耗性能
    虚拟dom是一个对象,它的属性相比于真是dom就比较少 – 用少量的属性来描述一个dom,他无法在浏览器中直接显示

    三:为什么在vue中会用到虚拟dom

    有两点好处:

    1.虚拟dom比真是dom体积小,操作时相对来说消耗性能少。如果在页面要删除一个dom,会不会引起页面重绘? 会,它很可能会影响后边元素的布局。
    2:虚拟dom才可能跨端(在服务端也可以使用vue技术),跨平台。如果直接操作真实dom,则与浏览器强制绑定在一起,vue就失去更多的可能。

    四:vue实如何使用虚拟dom的

    五:响应式与render函数

    数据变了,视图(真是dom)就会跟着变

    数据变化会自动调用一次render()函数,会产生一个新的虚拟dom,把这个新的虚拟dom与初始化比较,这样就可以知道是那些地方发生了改变,再这个变动同步跟新到真实dom

    展开全文
  • 浅谈Vue中的虚拟DOM

    千次阅读 2019-05-25 17:06:36
    使用虚拟DOM有什么好处? 虚拟dom 案例: 来说明为什么 virtual dom 是好用的 我有一个数 0 ,我希望这个数自增到 10001 , 然后让这个数据输出到页面中? var box = document.querySelector( '.box' ) ; var ...
  • 浅谈什么虚拟DOM

    2021-02-05 18:04:55
    由于虚拟DOM涉及到的diff算法比较复杂,之后会写一篇文章单独讨论和总结 正文 当谈及虚拟 DOM 的时候,在我的脑中几个问题蹦出来: 什么是虚拟 DOM,它和 JSX 是强绑定的吗 为什么要用它,能带来什么好处?性能?...
  • 虚拟DOM 和 Diff 算法 什么是虚拟DOM?...(使用虚拟DOM有什么好处?) 越多的真实dom操作,越损耗性能 操作数据要大大的减少性能损耗,提高渲染效率 注意:vue优化的一个好处就是使用了虚拟d...
  • 作者:Anthony Gore原文:What's The Deal With Vue's Virtual DOM?———————————...这个术语听起来科幻小说的感觉,它主要的目的是提升 DOM 更新的速度和效率,另外还有一些其他的好处。先想想 DOM 到底...
  • 虚拟DOM 和 Diff 算法 ...使用虚拟DOM有什么好处? 操作数据要大大的减少性能损耗,提高渲染效率 越多的真实dom操作,越损耗性能 什么是Diff 算法? 是linux的基础命令,用来比较两个文本文件的差异,是...
  • 虚拟DOM相关知识

    2020-10-19 23:33:05
    5.Vue 中的 key 有什么作用 1.为什么需要虚拟DOM? JS 操作真实 DOM 的代价? 用我们传统的开发模式,原生 JS 或 JQ 操作 DOM 时,浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中,我需要更新 10 个 ...
  • 虚拟 DOM 实现原理

    2019-11-29 10:29:48
    虚拟DOM的思路是:(前提关键是:在虚拟DOM树上的操作不会渲染到视图) 一、将DOM树转换成JS对象树,产生第一个虚拟DOM树(与真实DOM树一样) 二、数据发生变化时(当你增删操作)产生第二个虚拟...
  • 虚拟dom的理解

    2018-05-30 14:47:15
    首先要理解什么虚拟dom,为什么要用虚拟dom虚拟dom前身是什么。跟jquery比的好处什么。 例如个表格 name age address 张三 20 北京 李四 21 上海 王五 22 广州 我们用jquery...
  • 浅谈Vue的虚拟dom

    2020-03-23 20:40:57
    虚拟dom有什么作用和好处? 什么是dom? 在html中dom其实就是节点,即就是html各种的标签在JavaScript中的最大特性其实就是dom节点的操作,但是我们在每每操作dom的时候都往往的消耗电脑的性能,所以在这个问题上Vue...
  • 虚拟dom和diff算法

    2021-01-08 20:20:04
    为什么使用虚拟dom有什么好处? Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个dom节点发生了变化,虚拟dom就是为了解决浏览器性能问题而被设计出来的。 diff算法 什么...
  • vue核心之虚拟DOM(vdom)

    2019-11-14 16:43:39
    为什么需要虚拟DOM,它有什么好处? 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个...
  • 4、虚拟DOM好处什么呢? 前情提要: 相信对于使用或react的人来说很熟悉,而他们常常也扮演着重要的角色,但对于我这种很少使用react,使用vue多一些的来说只能根据vue来展开介绍,失误地方请无情的鞭策我谢谢...
  • 虚拟DOM的实现原理与优缺点

    千次阅读 2020-09-22 21:33:01
    如前,若一次操作中10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用JS...
  • 三、为什么需要虚拟DOM,它有什么好处?四、实现虚拟DOM 一、真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第...
  • 2.jsDom和虚拟Dom,虚拟Dom有什么好处? 3.如果给你一个新项目,从零开始,你会怎么做/考虑哪些方面? 4.vue和react区别,为什么选择vue/react?vue双向绑定是什么? 5.看你使用过Nodejs为什么会选择Nod
  • 2021-04-26

    2021-04-26 19:33:59
    Vue 1.那些数组方法会导致v-for更新页面? 的数组方法不导致v-for更新页面,如何处理?...3.虚拟DOM什么? 虚拟DOM好处? {1.虚拟DOM本质就是一个Js对象,保存DOM关键信息 2.提高DOM更新的性能,不能频繁操作真实D...
  • vuejs Q&A

    2017-07-21 15:02:52
    虚拟DOM好处? 初始视图没有优势,反而中间多了一层虚拟DOM,所以性能没有提高 更新视图优势明显:减少重复生成与删除DOM操作,减少查询定位DOM元素的操作,能修改操作完成的就绝不使用生成与删除来操作 vue-cli ...
  • 使用React有什么好处? 很容易知道如何渲染组件,您只需要查看render函数。 JSX使阅读组件代码变得容易。 也很容易看到布局,或如何将组件相互插入/组合。 您可以在服务器端渲染React。 这样可以提高SEO和性能。 ...
  • VUE笔记

    2020-11-23 08:34:46
    使用它有什么好处 虚拟dom是利用js描述元素与元素的关系。 好处:是可以快速的渲染和高效的更新元素,提高浏览器的性能 2、简述vue中常用的指令(最少写出六个) ​ v-html 解析输出变量 能解析html ​ v-text 解析...
  • vue 面试题库(20题)

    2020-09-16 15:13:31
    使用它有什么好处 虚拟dom是利用js描述元素与元素的关系。 好处:是可以快速的渲染和高效的更新元素,提高浏览器的性能 2、简述vue中常用的指令(最少写出六个) ​ v-html 解析输出变量 能解析html ​ v-text 解析...
  • 腾讯提前批面经

    2020-08-17 21:30:23
    9、虚拟dom有什么好处,如何实现的,怎么实现最小代价替换/删除dom的。 10、koa 中间件。 11、说说generator。 12、中途有个问题我确实忘了一直没听过,导致没记住。不好意思。 好了估计一面凉凉。 ...
  • 其中一章是介绍虚拟DOM的,它是位于Javascript和真正DOM之间的一层缓存层。为什么引入它,为什么它这么流行,前端三大框架,小程序等,随处可见它的身影。其背后原理是什么。不基于浏览器背后的运行原理,是很难说...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

虚拟dom有什么好处