虚拟dom (virtual dom)(vnode)
1、什么是虚拟 DOM (vdom)
起源
虚拟dom最先是由facebook团队提出的,最先运用在react中,之后在vue2.0版本中引入了虚拟DOM的概念是什么
虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,以往,我们改变更新页面,只能通过首先查找dom对象,再进行修改dom的方式来达到目的。 但这种方式相当消耗计算资源,
因为每次查询 dom ,都需要遍历整颗 dom 树。
现在,我们用对象的方式来描述真实的 dom,并且通过对象与真实dom建立了一一对应的关系,那么每次 dom 的更改,我通过找到相应对象,也就找到了相应的dom节点,再对其进行更新。这样的话,就能节省性能,因为js 对象的查询,比对整个dom 树的查询,所消耗的性能要少。
本质
Vnode的本质就是用树型结构的JS对象来描述真实的DOM结构的信息,这个树结构的JS对象包含了整个DOM结构的信息.。
可见左边的DOM结构,不论是标签名称还是标签的属性或标签的子集,都会对应在右边的树结构里。
2、虚拟 DOM 的优缺点
优点:
降低浏览器性能消耗
因为Javascript的运算速度远大于DOM操作的执行速度,因此,运用patching算法来计算出真正需要更新的节点,最大限度地减少DOM操作,从而提高性能。在vnode技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom,然后修改样式行为或者结构,来达到更新 ui 的目的。这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom树。
在vnode技术出现之后,我们建立一个虚拟 dom 对象来对应真实的 dom 树,那么每次 dom 的更改就变成了 js 对象的属性的更改 ,这样一来就能查找 js 对象的属性变化要比查询 dom 树的 性能开销小。
diff算法,减少回流和重绘
通过diff算法,优化遍历,对真实dom进行打补丁式的新增、修改、删除,实现局部更新,减少回流和重绘。vnode优化性能核心思想,就是每次更新 dom 都尽量避免刷新整个页面,而是有针对性的 去刷新那被更改的一部分 ,来释放掉被无效渲染占用的 gpu,cup性能。同时,也减少了大量的dom操作,减少了浏览器的回流和重绘。
跨平台
虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,相比之下虚拟 DOM ,可以进行更方便地跨平台操作,例如:服务器渲染、weex 开发
等等
缺点
首次显示要慢些
:
首次渲染大量DOM时,由于多了一层虚拟DOM的计算, 会比innerHTML插入慢无法进行极致优化
:
虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中 无法进行针对性的极致优化。
3、简述虚拟 DOM 实现原理
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要 的 dom 操作,从而提高性能。
具体实现步骤如下:
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树, 插到文档当中;
当状态变更的时候,重新构造一棵新的对象树。通过diff 算法,比较新旧虚拟 DOM 树的差异。
根据差异,对真正的 DOM 树进行增、删、改。
4、虚拟DOM的逻辑(React虚拟dom到真实dom发生了什么)
6,React16 更新了什么
React16中引入了 Fiber
这个概念,从根本上解决了由于js的单线程运行,遇到计算量较大的情况,导致动画和交互卡顿的问题。
Fiber的核心是实现了一个基于优先级和requestIdleCallback的循环任务调度算法 。它可以把一个任务拆分成多个小任务,并且可随时中止或恢复任务,同时也可以根据优先级不同来选择优先执行任务
参考链接 https://www.jianshu.com/p/4db4b191de06
虚拟dom (virtual dom)(vnode)相关推荐
- vue xunidom_vue的虚拟dom(Virtual DOM )
模板转换成视图的过程 在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制. 渲染函数:渲染函数是用来生成Virtual DOM的: VNode虚拟节点: ...
- 【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍 什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
- Vue 源码学习—Virtual DOM(虚拟 DOM)
Virtual DOM Virtual DOM是什么 真实DOM成员 引入原因 作用 Virtual DOM是什么 定义: 普通的js对象来描述DOM对象,不是真实的DOM,顾名思义,称为虚拟DOM ...
- vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
- Virtual DOM和diff算法 概念理解
(1)vdom是什么? vdom是虚拟DOM(Virtual DOM)的简称,指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做.换而言之,vdom就是JS对象. 如下DOM结构: < ...
- vue源码分析系列三:render的执行过程和Virtual DOM的产生
render 手写 render 函数,仔细观察下面这段代码,试想一下这里的 createElement 参数是什么 . new Vue({el: '#application',render(crea ...
- Virtual DOM 的实现原理
Virtual DOM 的实现原理 Virtual DOM 的实现原理 什么是虚拟DOM 为什么要用虚拟DOM 虚拟 DOM 的作用和虚拟 DOM 库 虚拟 DOM 的作用 虚拟 DOM 库 Snab ...
- Virtual DOM的简单实现
了解React的同学都知道,React提供了一个高效的视图更新机制:Virtual DOM,因为DOM天生就慢,所以操作DOM的时候要小心翼翼,稍微改动就会触发重绘重排,大量消耗性能. 1.Virtu ...
- 实现 Virtual DOM 下的一个 VNode 节点
实现 Virtual DOM 下的一个 VNode 节点 什么是VNode 我们知道,render function 会被转化成 VNode 节点.Virtual DOM 其实就是一棵以 JavaSc ...
最新文章
- 中国信通院《新型智慧城市发展研究报告》
- 利用JDK动态代理机制实现简单拦截器
- vue生命周期图示中英文版Vue实例生命周期钩子
- metinfo mysql_Metinfo 5.3.17 前台SQL注入漏洞
- 剑指企业级云原生,阿里云 CNFS 如何破局容器持久化存储困境
- 呼叫中心客服交流三大法宝
- 驳《IT开发工程师的悲哀》
- 大数据之-Hadoop3.x_Yarn_公平调度器---大数据之hadoop3.x工作笔记0146
- linux编译安装mysql的意思,linux编译模式安装mysql 步骤说明
- 第一课----色彩构成与色彩模式
- java 执行bat文件
- VLAN-TAG超经典解释
- 易语言x64位封包拦截技术
- java jmf播放视频_使用JMF实现java视频播放器
- 转贴不说话:陕西芹菜价格创新低 农民开拖拉机自毁芹菜
- 一个程序员的奋斗txt
- User must be authenticated with Spring Security before authorization can be completed.解决方法
- 订餐系统jsp模板_基于JSP的网上订餐系统的设计与实现
- CAS-基于数据库认证
- 个人的敏感信息需要怎么进行安全保护的一些思考记录
热门文章
- wkt文件java解析_python – 解析WKT文件
- 给我推荐一些质量比较靠谱的眉毛精油产品
- 关于微信小程序中图标的引用(基于iconfont)
- 机器人足球竞赛相关链接
- python调用aspen_aspen-Aspen是一个Python web框架。简单化是主要的吸引力。-Gratipay, LLC...
- sqlserver比较日期大小
- 百度地图api实现渐变色轨迹线
- 大数据在电子商务中的应用有哪些
- 面试必备操作系统之进程调度算法(非常全面)
- php 获取优酷视频教程,php获取优酷土豆页面中视频swf播放器地址_PHP教程