虚拟 DOM 是什么? 有什么优缺点?

虚拟DOM是为了解决直接操作DOM导致的性能问题而引入的技术,它在Vue等框架中被广泛应用。通过创建虚拟的JavaScript对象来模拟真实DOM,从而在更新视图时提高效率并简化开发流程。虚拟DOM的优点包括自动DOM操作、跨平台支持和基本性能保障。然而,它在某些极端性能要求场景下无法进行极致优化,并且首次渲染大量DOM时可能比innerHTML慢。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是虚拟dom?
由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM,会产⽣⼀定的性能问题. 所以在vue中将真实的DOM节点抽离成⼀个虚拟
的DOM树,这个虚拟的DOM树就是虚拟DOM.

优点:
保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作,它的⼀些 DOM 操作的实现必须是普适的,所以它
的性能并不是最优的;但是⽐起粗暴的 DOM 操作性能要好很多,因此框架的虚拟 DOM ⾄少可以保证在你不需要⼿动优化的
情况下,依然可以提供还不错的性能,即保证性能的下限;
⽆需⼿动操作 DOM: 我们不再需要⼿动去操作 DOM,只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向
绑定,帮我们以可预期的⽅式更新视图,极⼤提⾼我们的开发效率;
跨平台: 虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关,相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作,例如
服务器渲染、weex 开发等等。

缺点:
⽆法进⾏极致优化: 虽然虚拟 DOM + 合理的优化,⾜以应对绝⼤部分应⽤的性能需求,但在⼀些性能要求极⾼的应⽤中虚拟
DOM ⽆法进⾏针对性的极致优化。
⾸次渲染⼤量 DOM 时,由于多了⼀层虚拟 DOM 的计算,会⽐ innerHTML 插⼊慢

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值