虚拟dom_虚拟DOM与dom diff
什么是虚拟DOM
虚拟DOM是一颗以JavaScript对象(node节点)作为基础的树,用对象属性来描述节点,他是对真实DOM的抽象,通过一些列操作使这棵树映射到真实环境上
虚拟dom就是能代表DOM树的对象,通常含有标签名,标签上的属性,事件监听和子元素们以及其它属性
为什么要有虚拟DOM这个东西
人们创造出虚拟 DOM 就是为了更好地将虚拟节点渲染到视图上,也就是把虚拟DOM变成真实的 DOM 节点,提高视图的渲染性能。
在真实DOM操作中
传统的开发模式,原生JS或JQ操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中,我需要更新10个DOM节点,浏览器收到第一个DOM请求后并不知道还有9次更新操作,因此会马上执行流程,最终执行10次。例如,第一次计算完,紧接着下一个DOM更新请求,这个节点的坐标值就变了,前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。操作DOM的代价是昂贵的,频繁操作还是会出现页面卡顿,影响用户体验。
使用虚拟DOM
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的内容保存到本地一个JS对象中,最终将这个JS对象一次性的插入到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。
虚拟DOM的优点(为什么虚拟DOM比DOM快)
1.减少DOM的操作:
虚拟dom可以将多次操作合并为一次操作,减少DOM操作的次数。比如你添加1000个节点,确实一个接一个操作, 虚拟DOM借助DOM diff可以把多余的操作省掉,减少DOM操作的范围。比如你添加1000个节点,其实只有10个是新增的
2.跨平台渲染:
虚拟DOM不仅可以变成DOM,还可以变成小程序、 iOS应用、安卓应用,因为虚拟DOM本质上只是一个JS对象
虚拟DOM的缺点
需要额外的创建函数,如create Element或h,但是可以通过JSX来简化成XML写法
DOM diff
DOM diff 是两个虚拟 DOM 树对比的算法:diff 算法仅在两个树的同级的虚拟节点之间做比较,递归地进行比较,最终实现整个 DOM 树的更新。
diff算法的三个步骤:
用 JS 对象的方式来表示 DOM 树的结构,然后根据这个对象构建出真实的 DOM 树,插到文档中
当状态变化的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树的差异
最后把所记录的差异应用到所构建的真正的DOM树上,进行视图更新
DOM diff 在做比较时分为了三个层级
1.Tree Diff(层级比较)
先进行树结构的层级比较,对同一个父节点下的所有子节点进行比较;
接着看节点是什么类型的,是组件就做 Component Diff;
如果节点是标签或者元素,就做 Element Diff;
2. omponent Diff (组件比较)
若组件类型相同,则继续按照层级比较其虚拟 DOM的结构;
如果组件类型不同,则替换整个组件的所有内容
3. Element Diff (元素比较)
如果节点是原生标签,则看标签名做比较是否相同来决定替换还是更新属性
然后进入标签后代递归 Tree Diff
DOM diff的问题
同级比较存在bug,做元素比较的时候,当 DOM 处于同一层级的时候,diff 提供了三个节点操作,分别是:删除、插入和移动
key值的问题
没有使用key的时候,你想把第二个方块删除掉,你想要到的结果是剩下三角和圆圈,但是真实的结果却是剩下三角和方框
这是因为,vue做了两件事
* 把2变成3
* 把2变成3* 把3删除掉
这有两个数组[1,2,3] 和 [1,3]。
人类会说,这不就是少了个2嘛
但是计算机不会直接删除第二个,而是会遍历数组:
首先对比1和1,发现[1没变」;然后对比2和3,发现「2变成了3」;最后对比undefined和3,发现[3被删除了」。
所以计算机的结论是:「2变成了 3」以及「3被删除了」
解决方法:
就是给每一个元素一个id,用id做key值
为什么不能用index作为key
如果你用index作为key,那么在删除第二项的时候,index 就会从1 23变成1 2(因为index永远都是连续的,所以不可能是1 3)
那么 Vue依然会认为你删除的是第三项。也就是会遇到上面一样的bug。
所以,永远不要用index作为key.
虚拟dom_虚拟DOM与dom diff相关推荐
- 虚拟dom_虚拟DOM发展的前世与今身
web这几年蓬勃发展.经历了几个比较大的转变.我们先来大概回顾一下. Jquery 在虚拟Dom被提出来之前,我们前端框架Jquery凭借着良好的兼容性和简单易用的特性征服了大量的前端开发者,从而统治 ...
- 虚拟dom添加虚拟dom_虚拟DOM缓慢。 认识记忆化的DOM
虚拟dom添加虚拟dom by Sindre Osen Aarsaether 通过Sindre Osen Aarsaether 虚拟DOM缓慢. 符合已记忆的DOM. (The Virtual DOM ...
- 虚拟dom_通过编写简易虚拟DOM,来学习虚拟DOM 的原理
茫茫人海中与你相遇 相信未来的你不会很差 作者:前端小智 来源:https://segmentfault.com/a/1190000037599333 要构建自己的虚拟DOM,需要知道两件事.你甚至不 ...
- 虚拟dom_从0到1实现一个虚拟DOM
来源 | https://segmentfault.com/a/1190000021331850要构建自己的虚拟 DOM,需要知道两件事.你甚至不需要深入 React 的源代码或者深入任何其他虚拟 D ...
- 从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考
写在前面的一些话 从我上大学开始正式认识前端这个岗位到现在已经整整过了六年,这六年于我而言就像是观赏了一场盛大的游园活动.无数各式各样的框架.模式.开发思路如同花车一般从眼前掠过又走远.留下了一地残乱 ...
- ihtml2document能不能根据id获取dom_回到基础:什么是DOM及DOM操作?
译者:前端小智 来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
- 什么是DOM及DOM操作?
什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准. W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本 ...
- 什么是虚拟主机?虚拟主机是什么意思
什么是虚拟主机?虚拟主机是什么意思?相信很多人都会有这样的疑问,下面聚名企服为您详解一下以上问题. 什么是虚拟主机 虚拟主机是使用特殊的软硬件技术,把一台运行在因特网上的服务器主机分成一台台" ...
- html dom节点源码,HTML DOM HTML DOM 节点 - 闪电教程JSRUN
在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 ...
最新文章
- Django后端彻底解决跨域问题
- linux 循环套循环,linux中的嵌套循环
- ADO.NET Entity Framework如何:手动配置实体框架项目
- QLocalServer和QLocalSocket单进程和进程通信
- 最棒 Spring Boot 干货总结
- Python功能之反射
- 大数据学习笔记01:大数据概述
- php -- 取日期
- win10系统怎么改奇摩输入法_windows10如何更改输入法
- 推荐一款可以在浏览器中运行的人脸识别库
- html怎么调用jq和js,js的outerHTML 与jquery的prop()的用法
- 2.数据可视化 Echarts项目 旋转地球
- “神舟八号”飞船将瞄准11月1日5时58分发射
- vue3中 v-md-editor 编辑器的基本使用分享
- Linux——重启服务器后磁盘名称错乱
- 一种新型免费无损图片格式FLIF
- 74LS148+74LS47简易病房呼叫系统电路图
- php爬取html内容,php抓取网页html,curl和file_get_contents通过get或post方式抓取网页内容,源代码
- sin和cos的爱恋
- 【参赛作品12】基于华为云鲲鹏弹性云服务器部署openGauss数据库-实验
热门文章
- 【云计算平台】Hadoop单机模式环境搭建
- java 时间戳转换成时间_java 10位时间戳 转成时间
- SpringBoot中如何实现全链路调用日志跟踪?这方法才优雅!
- 工作中常用到的 Spring 依赖管理技术盘点
- Jsp使用Cookie完成记住账号密码的功能
- websocket替代方案_WebSocket 有没有可能取代 AJAX ?
- 【Spring Bean的生命周期】
- Luogu P4478 [BJWC2018]上学路线 卢卡斯+组合+CRT
- python学习之路(17)
- [转载]值得推荐的C/C++框架和库