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

        虚拟 dom 是利用 js 描述元素与元素的关系,用 js 对象来表示真实的 DOM 树结构,创建一个虚拟 DOM 对象

        由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM,会产⽣⼀定的性能问题.

        在组件渲染的时候会调用 render 函数,这个函数会生成一个虚拟 dom,再根据这个虚拟 dom 生成真实的 dom,然后这个真实的 dom 会挂载到我们的页面中。

        如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom

        如果组件内有响应的数据,数据发生改变的时候 render 函数会生成一个新的虚拟 dom 新的虚拟 dom 树和旧的虚拟 dom 树进行对比,找到要要修改的虚拟 dom 的部分,去修改相对应部分的真实 dom

        优点:

        保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作,它的⼀些 DOM 操作的实现必须是普适的,所以它 的性能并不是最优的;但是⽐起粗暴的 DOM 操作性能要好很多,因此框架的虚拟 DOM ⾄少可以保证在你不需要⼿动优化的 情况下,依然可以提供还不错的性能,即保证性能的下限;

        ⽆需⼿动操作 DOM: 我们不再需要⼿动去操作 DOM,只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向 绑定,帮我们以可预期的⽅式更新视图,极⼤提⾼我们的开发效率;

        跨平台: 虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关,相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作,例如 服务器渲染、weex 开发等等。

        缺点:

        ⽆法进⾏极致优化: 虽然虚拟 DOM + 合理的优化,⾜以应对绝⼤部分应⽤的性能需求,但在⼀些性能要求极⾼的应⽤中虚拟 DOM ⽆法进⾏针对性的极致优化;

        ⾸次渲染⼤量 DOM 时,由于多了⼀层虚拟 DOM 的计算,会⽐ innerHTML 插⼊慢。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 虚拟 DOM 是一种用树型结构的 JavaScript 对象来描述真实的 DOM 结构的信息的技术。它的优点包括:保证性能下限,虚拟 DOM 的性能虽然不是最优的,但相比直接操作 DOM 的性能要好很多,因此在不需要手动优化的情况下,仍然可以提供不错的性能;无需手动操作 DOM,只需要编写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和数据双向绑定,帮助我们以可预期的方式更新视图,极大提高开发效率。\[1\]\[2\] 虚拟 DOM 的缺点是它的性能并不是最优的,因为它需要适配任何上层 API 可能产生的操作,所以它的一些 DOM 操作的实现必须是普适的。另外,虚拟 DOM 的引入也增加了一定的复杂性和学习成本。\[1\] 总的来说,虚拟 DOM 技术在提高开发效率的同时,也带来了一些性能上的折扣和额外的复杂性。\[3\] #### 引用[.reference_title] - *1* *2* [虚拟 DOM 是什么? 有什么优缺点?](https://blog.csdn.net/zhangyu812/article/details/124446353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [虚拟dom (virtual dom)(vnode)](https://blog.csdn.net/yiyueqinghui/article/details/105468012)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值