UI—html—DOM(tree-structured representation、 manipulate)—Virtual DOM(component)

Real DOM强调树状结构的整体;核心是树状结构的维护;

Virtual DOM强调的是组件,核心是组件的构建、组合和维护;

Real DOM

First things first, DOM stands for “Document Object Model”. The DOM in simple words represents the UI of your application. Everytime there is a change in the state of your application UI, the DOM gets updated to represent that change.

Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.

So, while HTML is a text, the DOM is an in-memory representation of this text.

The HTML DOM provides an interface (API) to traverse and modify the nodes. It contains methods like getElementById or removeChild. We usually use JavaScript language to work with the DOM, because… Well, nobody knows why :).

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

https://www.cnblogs.com/feng9exe/p/10906496.html

DOM是什么的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

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

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. [转帖]How long does it take to make a context switch?

    How long does it take to make a context switch?   FROM: http://blog.tsunanet.net/2010/11/how-long-do ...

  2. Docker-Compose通过文件声明默认的环境变量

    写文目的 在写本文之前,我在做一个docker-compose项目,这里需要在docker-compose.yml配置中引用到宿主机的ip,然而docker-compose并没有命令行一个输入的选项, ...

  3. TJOI2018简要题解

    Day1T1数学计算 按照时间轴建一棵线段树即可,复杂度为\(O(m \log m)\) #include <bits/stdc++.h> #define N 100005 #define ...

  4. 系统压测结果对比:tomcat/thinkphp/swoole/php-fpm/apache

    [测试所用服务器8核,16G内存]压测接口:很简单,从一张表里根据主键随机查询出一条数据[数据库服务器和WEB服务器分开的].表数据量大概:910000+条. 这个测试结果很有趣:tp5.0和3.2性 ...

  5. SQL Server 新增自动执行任务

    第一步右击SQL Server代理,新建作业 第二步选择常规,给你要执行的计划命名 第三步选择步骤,然后给步骤命名,选择类型,数据库,输入你要执行的语句. 第四步设置要执行的频率,根据业务需要,一般建 ...

  6. python基础05day--函数

    一 函数知识体系 什么是函数?为什么要用函数?函数的分类:内置函数与自定义函数如何自定义函数 语法 定义有参数函数,及有参函数的应用场景 定义无参数函数,及无参函数的应用场景 定义空函数,及空函数的应 ...

  7. ASP.NET 后台 COOKIE 的设置

    这几年经常与安全打交道,深知 COOKIE 对一个网站的安全影响有多大,所以在编写相与 cookie 相关代码的时候,都会特别的小心. 最近做一个系统,有几个地方用到 cookie, 然后统一把 co ...

  8. HTML5深入学习之鼠标跟随,拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  9. 025:为什么需要将Logger对象声明为private static final类型的

    本文阅读时间大约4分钟. 参考答案 就这个问题而言,我总结了三个原因: 设置为private是为了防止其他类使用当前类的日志对象: 设置为static是为了让每个类中的日志对象只生成一份,日志对象是属 ...

  10. linux服务器问题排查:w命令卡住

    基本情况 系统: ubuntu16.04 症状: who命令可以用,w命令用不了 sudo iotop命令会卡住,黑屏 nvidia-smi命令和nvl命令都用不了,卡住 排查步骤 strace ps ...