虚拟DOM

已于 2023-12-06 14:24:58 修改
阅读量401 收藏 7
点赞数 7
文章标签： javascript 前端 开发语言
于 2023-12-06 14:23:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dujintao1/article/details/134830725
版权

为什么使用虚拟dom

**优点:** 1. 保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限 2. 无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率 跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

缺点：
无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化

虚拟dom的原理

虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象; * 状态变更时，记录新树和旧树的差异 * 最后把差异更新到真正的dom中

为什么虚拟dom会提高性能

虚拟dom相当于在js的真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能

虚拟DOM和真实DOM

虚拟DOM不会进行排版与重绘操作

虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

真实DOM频繁排版与重绘的效率是相当低的

虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

  • 使用虚拟DOM的损耗计算：

总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘

  • 直接使用真实DOM的损耗计算：

总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘

一个小极客
关注
博客
小程序与原生App那个好？
10-24 117
后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能。不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制。发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布。开发周期长，开发成本高，需要下载。
博客
Vue 常用的狗钩子函数
10-24 321
是计算属性，也可以理解为一个方法。无需再data中声明，其中计算的结果如果不发生改变就不会触发，在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。是个对象，是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，页面加载完成后触发函数html、css、js，属于js方法，一个页面只会调用一次。是个方法，在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。只执行逻辑，返回值可有可无，对一些数据请求，点击事件进行封装函数等。
博客
Vue Setup 语法糖介绍
10-24 376
如果 title 是可选的 prop，则传入的 props 中可能没有 title。setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
博客
vue给对象增加属性页面没有响应
10-24 331
由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新。
博客
Cannot read property ‘prototype’ of undefined 表单
10-24 560
问题就是Cannot read property ‘prototype’ of undefined 解决办法通过浏览器报错提示代码定位问题，解决问题。",无法绑定，需切记。同时，如果v-for动态循环el-form的话，以上两种方法都无法绑定，目前没有找到解决办法。form表单 有时候需要通过v-for动态循环加载el-form-item,并且绑定验证规则。一般解决方案查看浏览器报错，查看代码运行到那个阶段未之行结束，阅读源码以及相关文档等。Vue项目中遇到视图不更新，方法不执行，埋点不触发等问题。
博客
动态表单系统
10-18 176
可拖拽表单，可以实现售票，动态表单生成，平时可以解决大家表单收集的所有难题。
博客
极客公园 招聘啦！！！！！
04-18 214
创立于2010年，总部北京，极客公园聚焦互联网领域,跟踪最新的科技动态，关注极具创新精神的科技产品，并与科技行业中最优秀的创业家和从业者站在一起,共同实现价值的成长；我们的产品线包括科技媒体、科技行业精英企业家社区、科技行业线下活动营销、酷科技硬件测评等；精通常见应用环境部署，包括Nginx、Jenkins、GitHab、Redis等；善于思考，能独立分析和解决问题，具有极客精神，追求代码细节完美，喜欢专研。熟悉常见集成软件部署，包括Docker、K8S等；保证服务器的正常运转；负责平常服务器迁移；
博客
js的继承方式
12-20 469
核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实 例方法/属性，避免的组合继承的缺点。new了一个空对象，这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。核心：为父类实例添加新特性，作为子类实例返回。
博客
懒加载的原理、实现
12-15 698
懒加载的原理：页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，==把真正的路径存在元素的“data-url”==的自定义属性里，要用的时候就取出来，再设置；3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。jQuery实现方式如下。
博客
高频js-----js执行机制 Event Loop
12-14 356
这是因为在 JavaScript 中，setTimeout 函数是一个异步函数，它会在指定的时间间隔后执行回调函数。在这段代码中，循环会立即执行，并且在每个迭代中都会调用 setTimeout 函数来创建一个定时器。但是，由于 setTimeout 是异步执行的，循环会继续执行而不会等待定时器的回调函数执行。关键字会暂停函数的执行，直到 Promise 对象被解析（resolved）为止 然后每隔1秒打印一个数字。首先我们需要了解js的执行机制 (Event Loop)函数返回的 Promise 对象。
博客
栈和队列(数据结构)
12-13 881
用循环链表表示队列，必定有链表的头结点，入队操作在链表尾插入，直接插入在尾指针指向的节点后面，时间复杂度是常数级的；出队操作在链表表头进行，也就是删除表头指向的节点，时间复杂度也是常数级的。允许删除的一端称为队头(front)，允许插入的一端称为队尾(rear)。显然仅有单链表的头指针不便于在表尾做插入操作，为此再增加一个尾指针，指向链表的最后一个结点。(Blank String) 注意：空串和空白串的不同，例如“ ”和“”分别表示长度为1的空白串和长度为0的空串。3.串的链式存储结构。
博客
数据结构总结(栈 队列)
12-12 1676
1.线性表的顺序存储结构：把线性表的结点按逻辑顺序依次存放在一组地址连续的存储单元里。顺序存储指内存地址是一块的，随机存取指访问时可以按下标随机访问，存储和存取是不一样的。如果是存储，则是指按顺序的，如果是存取，则是可以随机的，可以利用元素下标进行。数据结构就是研究数据的逻辑结构和物理结构以及它们之间相互关系，并对这种结构定义相应的运算，而且确保经过这些运算后所得到的新结构仍然是原来的结构类型。3.数据项：数据的不可分割的最小单位。2.数据元素：数据（集合）中的一个“个体”，数据及结构中讨论的基本单位。
博客
前端优化 ----防抖 节流
12-12 541
【代码】前端优化 ----防抖 节流。
博客
虚拟DOM和真实DOM区别和对比
12-11 852
钩子来管理组件的状态，并使用JSX语法描述页面结构。在点击按钮时，只会更新虚拟DOM中的计数器值，然后React会根据差异更新真实DOM中的相应部分。可以看到，使用虚拟DOM的代码相对简洁和直观，而且只更新了需要改变的部分，提高了性能。而使用真实DOM的代码则相对繁琐，需要手动操作DOM来更新页面。而在使用真实DOM的代码案例中，我们直接使用JavaScript来操作真实DOM。在使用虚拟DOM的代码案例中，使用了React库，通过使用。使用虚拟DOM的代码案例（使用React）使用真实DOM的代码案例。
博客
Promise
12-10 393
promise 本身是同步执行的 promise.then是异步Promise 必须为以下三种状态之一：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。一旦Promise 被 resolve 或 reject，不能再迁移至其他任何状态（即状态 immutable）
博客
es6的新特性都有哪些
12-09 408
let定义块级作用域变量 没有变量的提升，必须先声明后使用 let声明的变量，不能与前面的let，var，conset声明的变量重名。3、他的this是继承当前上下文中的this 箭头函数没有函数原型 箭头函数不能当做Generator函数，const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改。const声明的变量不能与前面的let， var ， const声明的变量重。const声明的变量没有“变量的提升”，必须先声明后使用。数组的解构赋值、对象的解构赋值。
博客
Js获取url地址栏后面的参数
12-08 607
【代码】Js获取url地址栏后面的参数。
博客
前端如何使用express写一个简单的服务
12-07 561
自己使用nodejs——express ,koa，egg开发接口吧(本人比较喜欢egg和express)下载引入相应的npm依赖就好啦,这里我设置了跨域处理（相信学会这个,前端自己也可以处理跨域啦！再次运行就可以看到数据库的数据已经被找到了方便演示我用的是get请求,在实际开发推荐使用post哦~2.、这些代码大家就等于一个简单的服务已经搭建起来啦,运行文件,我们得到了路由返回的内容。好了，看到这里大家已经可以搭建一个简单的express了,快去试试吧！下面是一个简单的demo。
博客
常见的字符串方法
12-05 357
6.substring(a,b)方法：从索引a开始截取（包括a），一直截取到索引b（不包括b），如果里面只有一个 参数那么就直接截取到末尾。方法： 从索引a开始截取（包括a），一直截取到索引b（不包括b），如果里面只有一个参数，就直接截取到末尾。如果里面的参数是负数的话，使用方法跟数组中的slice()方法一样。如果第一个参数为负数的话，跟数组中 slice()使用方法一样。
博客
常见的数组方法
12-05 312
7.slice(a,b) 方法： 从索引a开始截取（包括a），一直截取到b（不包括b），如果里面只有一个参数，，那么就直接截取到末尾，不会改变原来的数组。方法：从索引a开始截取b个元素，并用c替换截取的元素，并改变原来的数组，如果只有一个参数，表示从这个索引开始截取到末尾。splice(a,b) 方法里面如果第一个参数为负数的话，使用方法跟slice() 方法一样，如果第二个参数为负数的话，表示截取的是一个空数组。3.unshift() 方法：在数组的最前面添加内容，返回值是添加后数组的长度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值