为什么虚拟dom会提高性能?

简介: 为什么虚拟dom会提高性能?

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

为什么一定要用虚拟dom?

       你用传统的原生api或jquery去操作dom时,浏览器会从构建dom树开始,从头到尾执行一遍流程。

真实dom的执行流程:用js对象表示真实的dom结构,当状态发生变化的时候,会重新创建一个虚拟dom树的结构,然后用新的树和旧的树进行比较,记录两颗树的差异,把所记录的差异应用到所构建的真实的dom树上,视图就更新了。

概括来说:模板——>渲染函数——>虚拟dom树——>真实dom。

举例说明渲染过程?

       当你一次需要更新10个dom节点,浏览器没有这么智能,它会在接收到第一个dom节点之后,并不知道后续还有九次更新的操作,因此会马上执行流程,因此会马上执行流程,最终执行10次流程。

而通过vnode,同样更新10个dom节点,虚拟dom不会立即进行操作,而是将这10次更新的diff内容保存到本地的一个js对象上,最终将这个js对象一次性的attach到dom树上,避免了大量的无谓的操作。

很多人认为虚拟dom最大的优势是diff算法,减少了javascript操作真实dom的带来的性能的消耗。虽然这是虚拟dom带来的优势,但是这不是全部的优势,虚拟dom最大的优势在于抽象了原本的渲染过程,实现了跨平台的能力,而不仅仅局限于浏览器的dom,可以是安卓和ios的原生组件,可以是近期很火热的小程序,也可以是各种GUI。

vue的虚拟dom是怎样的执行流程?

       vue.js是通过编译将模板渲染成函数,执行函数可以得到一个虚拟节点。在对dom进行操作的时候,会触发对应的dep中的watcher对象。wacther对象会调用对应的update来修改视图。

虚拟dom实现的原理三部分?

       用javascript对象模拟真实的dom树,对dom进行抽象。

       diff算法——比较两个虚拟dom树的差异

       pach算法——将两个虚拟dom对象的差异更新到真实的dom树。(pathc也叫patching,算法,这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果,找出需要更新的节点进行更新。)

虚拟dom的好处?

       降低浏览器的性能的消耗:javascript的运行速度远大于dom操作的执行速度,因此,运行patching算法来计算出真正的需要更新的节点,最大限度地减少了dom操作。

减少回流和重绘:通过diff算法,减少回流和重塑,通过diff算法优化遍历,对真实的dom进行打补丁式的新增、修改、删除、实现局部更新,减少回流和重绘等操作。用diff算法,减少了回流和重绘。

跨平台:虚拟dom本质上是js对象,相比之下虚拟dom,可以进行更方便的跨平台操作,例如浏览器的渲染、node、weex开发等。


相关文章
|
6月前
|
JavaScript 前端开发 编译器
说说你对虚拟 DOM 的理解?
说说你对虚拟 DOM 的理解?
54 0
|
3天前
|
JavaScript 算法 前端开发
虚拟 DOM 如何提高应用的性能?
虚拟 DOM 通过减少真实 DOM 操作、高效的 Diff 算法、提升渲染性能、跨平台能力以及优化内存管理等多种方式,全面提高了应用的性能,为用户提供了更流畅、高效的交互体验,尤其在构建大型、复杂的前端应用时,其性能优势更加显著。
12 1
|
1月前
|
缓存 监控 JavaScript
如何优化虚拟 DOM 的性能?
【10月更文挑战第1天】 优化虚拟 DOM 性能的方法包括减少不必要的渲染、优化 diff 算法、缓存虚拟 DOM 节点、避免过度嵌套的组件结构、合理使用事件处理、按需加载组件和模块、优化渲染流程及监控性能。这些策略有助于提升前端应用的性能和用户体验。
|
1月前
|
JavaScript 算法 前端开发
为什么虚拟 dom 会提高性能?
【10月更文挑战第1天】
|
5月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
42 1
|
6月前
|
JavaScript 算法 前端开发
虚拟Dom
虚拟Dom
|
6月前
|
JavaScript 前端开发 算法
深入理解虚拟DOM:原理、优势与实践
深入理解虚拟DOM:原理、优势与实践
342 0
|
6月前
|
JavaScript 算法 前端开发
Vue的虚拟DOM:Vue虚拟DOM的工作原理
【4月更文挑战第24天】Vue的虚拟DOM提升渲染性能,通过创建JavaScript对象树(虚拟DOM树)来跟踪DOM变化。当状态改变,Vue用新的虚拟DOM树与旧树对比(diff算法),找到最小DOM操作集合来更新真实DOM。优化策略包括减少状态变化、使用key属性和简化组件结构。理解虚拟DOM工作原理有助于Vue的性能优化。
|
6月前
|
JavaScript 前端开发 算法
什么是虚拟dom
什么是虚拟dom
|
6月前
|
JavaScript 前端开发 算法
为什么虚拟dom会提高性能?
为什么虚拟dom会提高性能?
74 0