虚拟DOM的学习总结

女爷i 2021-12-11 10:47 189阅读 0赞

什么是虚拟DOM？

就是虚拟创建的一个DOM对象。

为什么要有虚拟DOM？

我们要知道大部分浏览器的引擎工作流程都差不多，创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。

当你用原生js去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍，如果更新10次就重新渲染10次，导致很多没有必要的计算，这是十分耗费性能的。聪明的程序员为了解决这个问题，就引入了虚拟DOM这种设计思想。

若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。

JS对象模拟DOM节点的好处？

页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

diff算法的理解？

1、tree diff

新旧两颗DOM树，逐层对比的过程，就是Tree Diff；当整颗DOM树逐层对比完毕，则所有按需更新的元素都能找到

2、component  diff

在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff

如果对比前后，组件类型相同，则暂时认为此组件不需要更新；

如果对比前后，组件类型不同，则需要移除旧组件。创建新组建，并追加到页面上

3、element  diff

在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做element diff

key值作用？

1、key是React用于跟踪哪些元素是增加、删除、修改的辅助标记，需要保证在同级元素中key的唯一性

2、 React Diff 算法借助元素的 Key 值判断元素是新增、删除、修改，从而减少不必要的元素重渲染。

3、React 还需要借助 Key 值来判断元素与本地状态的关联关系

转载于:https://www.cnblogs.com/byond5924/p/11000587.html

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关虚拟DOM

Virtual DOM 算是React，Vue最核心的算法之一吧，避免了频繁的操作DOM树，让前端项目更快了。代码：https://github.com/justwo...

痛定思痛。/ 2024年04月17日 06:30/ 0 赞/ 73 阅读

相关前端框架的虚拟DOM（Virtual DOM）

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

超、凢脫俗/ 2024年02月05日 15:50/ 0 赞/ 49 阅读

相关 Vue的虚拟dom

vue的虚拟dom 1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能 2.虚拟dom,通过diff算法,减少性能的消耗 vue通过建立

淡淡的烟草味﹌/ 2023年06月11日 03:13/ 0 赞/ 23 阅读

相关 Javascript - dom[含虚拟dom] - 学习/实践

1.应用场景 <table> <tbody> <tr> <td>主要学习JavaScript中有关dom的知识，从而更加深入理解前端开发.</td>

Bertha 。/ 2022年11月30日 12:52/ 0 赞/ 153 阅读

相关虚拟DOM

真实DOM解析流程浏览器渲染的过程主要包括以下五步： 1. 浏览器获取到 HTML 文档并解析 DOM 树 2. 解析 CSS 构建层叠样式表模型CSSOM(CSS

川长思鸟来/ 2022年11月29日 05:58/ 0 赞/ 312 阅读

相关全面理解虚拟DOM，实现虚拟DOM

全面理解虚拟DOM，实现虚拟DOM 最近一两年前端最火的技术莫过于ReactJS，即便你没用过也该听过，ReactJS由业界顶尖的互联网公司facebook提出

曾经终败给现在/ 2022年06月16日 10:09/ 0 赞/ 250 阅读

相关虚拟DOM

虚拟DOM是为了解决DOM操作过多而导致性能低的问题而诞生的，虚拟DOM诞生之前，操作DOM的是直接操作的，改一次渲染一次，而虚拟DOM就是用js模拟一颗DOM树，每次修改DO

一时失言乱红尘/ 2022年05月14日 15:10/ 0 赞/ 217 阅读

相关虚拟DOM

用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行

痛定思痛。/ 2022年01月10日 04:59/ 0 赞/ 267 阅读

相关虚拟DOM的学习总结

什么是虚拟DOM？　　就是虚拟创建的一个DOM对象。为什么要有虚拟DOM？　　我们要知道大部分浏览器的引擎工作流程都差不多，创建DOM tree –> 创建Styl

女爷i/ 2021年12月11日 10:47/ 0 赞/ 190 阅读

相关 react 虚拟dom

1、state数据+jsx模板(标签)生成虚拟dom来描述真实dom(js对象),第一次时是损耗性能 <div id='abc'><span>hel

左手的ㄟ右手/ 2021年07月24日 13:48/ 0 赞/ 391 阅读