虚拟DOM与Diff算法

最新推荐文章于 2024-09-12 21:57:49 发布
最新推荐文章于 2024-09-12 21:57:49 发布
阅读量301 收藏
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baichaji/article/details/129411373
版权
本文介绍了真实DOM的渲染过程，包括DOM树、CSS树、Render树的构建以及回流与重绘的概念。接着深入讨论了虚拟DOM的概念，用于提高渲染效率。最后详细阐述了Diff算法，用于比较新旧虚拟DOM的差异，实现高效更新。
摘要由CSDN通过智能技术生成

1、真实DOM的渲染过程

 

DOM树的构建

HTML在页面进行解析时，会先解析HTML以及css代码，当遇到js代码是就会暂停解析，所以我们一般会将script标签放在最下面。

CSS树的构建

与构建DOM类似,浏览器也会将样式规则，构建成CSSOM。浏览器会遍历CSS中的规则集，根据css选择器创建具有父子，兄弟等关系的节点树。

Render树的构建

这一步是将html与css进行关联，确定每个节点使用什么样式，在页面中可见的节点，可以生成到render树中，不可见的不能生成到rebder树中（hesd 以及display:none的节点）

回流与重绘

当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。导致回流的原因：①浏览器窗口大小的改变②元素字体大小的变化 ③增加或者一处样式表④内容的变化⑤添加或则删除可见元素 等等

重绘不一定引起回流，但是回流一定会引起

最低0.47元/天 解锁文章
baichaji
关注
React Native探索（四）：虚拟DOM Diff算法解析
Louis的专栏
01-08 4103
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷 新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心 虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组
虚拟dom和diff算法
GFLY博客
06-24 343
vue2.0加入了virtual dom，有点向react靠拢的意思。vue的diff位于patch.js文件中，复杂度为O(n)。 了解diff过程，我们先从虚拟dom开始。 1. 虚拟dom是什么？ 虚拟dom( virtual dom )它是一个Object对象模型，用来模拟真实dom节点的结构。 2. diff算法是什么？ diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同...
虚拟 dom
lk19910323的博客
04-26 313
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
浅浅探究一下React的虚拟DOM和diff算法
最新发布
weixin_46714216的博客
09-12 984
通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。
虚拟DOM以及Diff算法
o__o__o__o的博客
03-20 556
虚拟DOM以及Diff算法如何对React性能进行提升
虚拟DOM和Diff算法
Creabine的博客
03-27 389
虚拟DOM （virtual dom） vdom 是 vue 和 react 的核心，学习他们绕不开vdom vdom比较独立，使用也比较简单 如果面试问到了vue和react的实现，免不了问vdom 问题： 什么是vdom？为何会存在vdom? vdom如何应用，核心API是什么? 介绍一下diff算法 什么是vdom？为何会存在vdom virtual dom , 虚拟dom 用js...
虚拟DOM与diff算法.doc
07-09
《虚拟DOM与diff算法》 在现代Web开发中，虚拟DOM（Virtual DOM）与diff算法是提高应用性能的关键技术，特别是在Vue和React等框架中。它们解决了直接操作DOM导致的性能问题，使得开发者可以更高效地处理用户界面的...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
React进阶-虚拟 DOM 和 Diff 算法
m0_62118859的博客
05-03 1536
1.虚拟 DOM 虚拟 DOM（Virtual DOM），就是一个 JS 对象，用来描述我们希望在页面中看到的 HTML 结构内容. 为什么使用虚拟 DOM？ 真实 DOM 对象属性多，处理起来繁琐、效率低。更重要的原因：React 要做跨平台开发，而不是被束缚在浏览器端。 原生 DOM 对象： 也是一个 JS 对象，是浏览器默认提供的 DOM 对象 和 HTML 元素之间是一一对应的关系 const element = { type: 'h1', props: { clas.
虚拟DOM和diff算法
Carol的小星球
07-30 240
虚拟DOM（Virtual dom），也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。 为什么要使用虚拟DOM呢，因为操作真实DOM的耗费的性能代价太高，频繁的操作DOM，会大量的造成页面的重绘和回流，出于性能优化的考虑，我们应该减少重绘和回流的操作。对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真实DOM上，只触发一次重绘和回流。 我们都知道Vue是基于数据驱动的，数据变化之后，不会像jQue
React-虚拟DOM与Diff算法
nostrud ipsum6
01-06 291
虚拟DOM与Diff算法 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 虚拟DOM(Virtual Document Object Model)的模拟DOM树操作需要用到DIff算法，推荐先看这句话下面的文章内容 DOM的本质 浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM ...
虚拟DOM与diff算法
CMcmf的博客
04-22 332
虚拟DOM( VDOM ) 和 diff算法 总结： 虚拟DOM 是什么？ 虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构 虚拟DOM的优缺点？ 2. diff算法 diff算法是用来比较两个或是多个文件， 返回值是文件的不同点 diff算法是同级比较的 diff思维也是来自后端 diff算法的比较思维 比较后会出现四种情况： 1、此...
深入理解Vue：虚拟DOM与diff算法解析
"Vue虚拟DOM与diff算法解析" 在前端开发领域，Vue和React等现代JavaScript框架广泛使用虚拟DOM（Virtual DOM）以及相应的diff算法来优化性能。本文将深入探讨这两个概念，尤其是针对Vue框架的应用。 虚拟DOM是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值