为什么虚拟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开发等。

目录
相关文章
|
8月前
|
JavaScript 开发者 UED
虚拟DOM的原理
虚拟DOM的原理
79 1
|
8月前
|
JavaScript 前端开发 编译器
说说你对虚拟 DOM 的理解?
说说你对虚拟 DOM 的理解?
67 0
|
JavaScript 前端开发 算法
虚拟dom如何提高性能
虚拟dom如何提高性能
109 0
|
JavaScript 前端开发 算法
虚拟 DOM 一定更快吗
虚拟 DOM 一定更快吗
69 0
|
2月前
|
JavaScript 算法 前端开发
虚拟 DOM 如何提高应用的性能?
虚拟 DOM 通过减少真实 DOM 操作、高效的 Diff 算法、提升渲染性能、跨平台能力以及优化内存管理等多种方式,全面提高了应用的性能,为用户提供了更流畅、高效的交互体验,尤其在构建大型、复杂的前端应用时,其性能优势更加显著。
48 1
|
3月前
|
JavaScript 前端开发 算法
虚拟 DOM 是什么?
【10月更文挑战第18天】虚拟 DOM 是前端框架中的一项重要技术,它通过抽象和优化 DOM 操作,为前端应用带来了更好的性能、开发效率和可维护性。
112 1
|
3月前
|
JavaScript 算法 前端开发
为什么虚拟 dom 会提高性能?
【10月更文挑战第1天】
|
3月前
|
缓存 监控 JavaScript
如何优化虚拟 DOM 的性能?
【10月更文挑战第1天】 优化虚拟 DOM 性能的方法包括减少不必要的渲染、优化 diff 算法、缓存虚拟 DOM 节点、避免过度嵌套的组件结构、合理使用事件处理、按需加载组件和模块、优化渲染流程及监控性能。这些策略有助于提升前端应用的性能和用户体验。
|
5月前
|
JavaScript 算法 前端开发
对虚拟 DOM 有何理解?
【8月更文挑战第30天】
69 2
|
5月前
|
JavaScript 前端开发 算法
虚拟DOM是什么
【8月更文挑战第10天】虚拟DOM是什么
54 1