传统的 DOM 操作是直接在 DOM 上操作,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作。如果需要操作的DOM元素过多,则成本太高,而采用 Virtual DOM 则会对需要修改的 DOM 进行比较(DIFF),从而只选择需要修改的部分。

引入虚拟DOM优缺点:

  • 尺寸

更多的功能意味着更多的代码。

  • 内存

虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。

  • 不是适合所有情况

如果虚拟DOM大量更改,这是合适的。但是单一的,频繁的更新的话,虚拟DOM将会花费更多的时间处理计算的工作。所以,如果你有一个DOM节点相对较少页面,用虚拟DOM,它实际上有可能会更慢。但对于大多数单页面应用,这应该都会更快

react虚拟dom:

依据diff算法,React把js和html混写在一起来

前端:更新状态、更新视图;所以前端页面的性能问题主要是由Dom操作引起的。因为Dom渲染慢,而JS解析编译相对非常非常非常快!js更容易表示节点

<ul id='app'>

<li>app1</li>

<li>app2</li>

</ul>

var domNode = {

tag: 'ul'

attributes: {

id: 'myId'

}

children: [ //这里是 li ]

};

只操作JavaScript对象

diff算法是虚拟dom核心:

传统的diff算法复杂度是次方级别增长,而react用的优化过的diff算法:

过程:1.节点比较(属性、文本);2.记录差别(编号);3.增删改查(js);

优化点:

1:老的父节点和新的父节点只要不一样,ok,断臂!即使孩子节点一模一样,都要删除,渲染新的节点;

2:父节点相同,对比节点的属性、文本,进行替换或者删除

虚拟DOM的更多相关文章

  1. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  2. React虚拟DOM浅析

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

  3. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  4. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  5. 【虚拟DOM】√

    深度剖析:如何实现一个 Virtual DOM 算法 为什么虚拟DOM更优胜一筹 新建树,渲染树,新建新树,对比树(算法),最少dom操作的渲染树

  6. React生命周期和虚拟DOM

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

  7. [深入react] 4.牛逼闪闪的虚拟DOM

    React.createElement嵌套后的结果就是虚拟dom,虚拟dom听着很高端,其实就是一个json,类似: { type:'div', props:{ className:"box ...

  8. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  9. 实现一个简单的虚拟DOM

    现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...

  10. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

随机推荐

  1. 在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Framework 4

    在引用阿里云库或其他库的时候,经常发生框架不兼容(原因是系统采用:Microsoft .NET Framework 4 Client Profile ),请改为Microsoft .NET Frame ...

  2. C 语言能不能在头文件定义全局变量?

    可以,但一般不会将全局变量的定义写在头文件中. 因为如果多个 C 源文件都添加了头文件,很容易引起重定义的问题.这时候一般编译器都会提示:“multiple definition of... firs ...

  3. 初探LaTeX

    第一次使用LaTeX 步骤  1 安装LaTeX 通过官网http://www.tug.org/mactex/mactex-download.html下载Mac版LaTeX. 安装成功后会出现 步骤 ...

  4. python基础之语句字符串

    python的种类: jpython                 java写的python ironpython            c#写的python cpython             ...

  5. SocketIO Server

    package com.fd.socketio; import org.json.JSONObject; import com.corundumstudio.socketio.AckRequest; ...

  6. Java框架spring 学习笔记(一):SpringBean、ApplicationContext 容器、BeanFactory容器

    Spring容器是Spring框架的核心,容器可以创建对象并创建的对象连接在一起,配置和管理他们的整个生命周期.Spring 容器使用依赖注入(DI)来作为管理应用程序的组件,被称为 Spring B ...

  7. Debian 9 Stretch国内常用镜像源

     随着Debian 9的普及,但由于伟大的墙的存在,那就有必要整理一下国内的镜像站点. 1.使用说明 一般情况下,修改/etc/apt/sources.list文件,将Debian的默认源地址改成新的 ...

  8. 初学Python:面向对象总结

    2019-04-16 Python 3x 一. 面向对象的含义和特性 面向对象是将世界中的具体事物进行抽象,从而能够更好的帮助我们归纳总结,解决复杂问题的一种解决问题的思路. 面向对象的三个特性——封 ...

  9. Ubuntu 16.04 上安装 PCL 1.8.0

    Ubuntu16.04之后安装pcl可以直接apt-get sudo apt-get install libpcl-dev pcl-tools 安装之前,准备一些依赖库 sudo apt-get up ...

  10. [leetcode]66. Plus One加一

    Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...