虚拟DOM Vitural DOM Tree
提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快。那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM。
一、什么DOM?
所谓DOM,就是HTML、XML、XHTML的一种抽象描述,它会把这些文档抽象成树类型的数据结构,即DOM tree。树的每一个节点,即一个DOM节点。浏览器提供了众多的DOM API,让它拥有了DOM操作的神奇魔力。
二、Virtual DOM出现的背景
由于SPA类型项目的出现,DOM tree的结构变得越来越复杂,它的改变也变得越来越频繁,大量的DOM操作产生了,对DOM节点的增删改,还有许多的事件监听、事件回调、事件销毁需要处理。由于DOM tree结构的频繁变化,会导致大量的reflow从而影响性能。于是Virtual DOM就出现了。
三、什么是Virtual DOM?
DOM结构是一系列的属性和方法的集合。所谓Virtual DOM,就是用轻量级的JavaScript对象来代替庞杂的DOM结构。下面代码就展示了HTML结构和Virtual DOM之间的关系。
虚拟DOM结构
虚拟DOM Vitural DOM Tree的更多相关文章
- 如何理解虚拟React的DOM(转)
目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...
- 虚拟 DOM 与 DOM Diff
虚拟 DOM 与 DOM Diff 本文写于 2020 年 9 月 12 日 虚拟 DOM 在今天已经是前端离不开的东西了,因为他的好处实在是太多了. 在<高性能 JavaScript>一 ...
- 精讲 org.w3c.dom(java dom)解析XML文档
org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...
- React v16-alpha 从virtual dom 到 dom 源码简读
一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...
- -_-#【Dom Ready / Dom Load】
Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...
- js 字符串转dom 和dom 转字符串
js 字符串转dom 和dom 转字符串 博客分类: JavaScript 前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...
- javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...
- DOM & Shadow DOM & Virtual DOM
DOM & Shadow DOM & Virtual DOM What is the difference between Shadow DOM and Virtual DOM? ht ...
- BOM与DOM之DOM操作
目录 一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字 二:查找标签 1.id查找 类查找 标签查找(直接查找) 2.i ...
随机推荐
- Day10-微信小程序实战-交友小程序-自定义callPhone 和copyText组件
---为了方便用户可以拨打电话和复制微信号(下面就要实现这样的两个功能) 注意:在小程序中是没办法直接的添加用户的微信的,所以就只能是复制微信号 (这种东西的话可以直接去做,也可以做成组件,做出组件的 ...
- 【初学Java学习笔记】SQL语句调优
1, 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2,应尽量避免在 where 子句中对字段进行 null 值判断,创建表时NULL是默认 ...
- linux 系统文件目录颜色及特殊权限对应的颜色
什么决定文件目录的颜色和背景? 颜色 说明 栗子 权限 白色 表示普通文件 蓝色 表示目录 绿色 表示可执行文件 浅蓝色 链接文件 黄色 表示设备文件 红色 表示压缩文件 红色闪烁 ...
- 【解读】Http协议
一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相 ...
- tomcat中AJP协议和HTTP协议的区别
tomcat的server.xml中的AJP和HTTP连接器区别 HTTP协议:连接器监听8080端口,负责建立HTTP连接.在通过浏览器访问Tomcat服务器的Web应用时,使用的就是这个连接器. ...
- java 中对hashmap进行排序
public class HashMapSort { public static void main(String[] args) { HashMap<Integer, Student> ...
- win中mysql安装
mysql安装: https://www.mysql.com/>官网 下载 [DOWNLOADS]----[MySQL Community Server]社区版---5.6---No thank ...
- 分享一个与jQuery相关的TypeError: $ is not a function问题解决过程
最近碰到一个比较奇葩的问题,估计很多人也遇到过,就是jQuery可能会遇到的‘$ is not a function’,不过我碰到的这个问题比较怪异,解决该问题也颇费了一番周折,现在给大家分享一下. ...
- Linux 递归批量删除文件夹或文件的命令
笔者有一次Linux服务器上的网站被别人在每一个文件夹下恶意注入了目录和文件,由于项目的目录太多,手动删除费时费力,最后用Linux的命令批量删除了注入内容.相关命令介绍如下: 递归批量删除文件夹: ...
- 从别人的代码中学习golang系列--02
这篇博客还是整理从https://github.com/LyricTian/gin-admin 这个项目中学习的golang相关知识 作者在项目中使用了https://github.com/googl ...