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


相关文章
|
5月前
|
JavaScript 前端开发 编译器
说说你对虚拟 DOM 的理解?
说说你对虚拟 DOM 的理解?
46 0
|
5月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
72 0
|
4月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
35 1
|
5月前
|
JavaScript 算法 前端开发
虚拟Dom
虚拟Dom
|
5月前
|
JavaScript 前端开发 算法
深入理解虚拟DOM:原理、优势与实践
深入理解虚拟DOM:原理、优势与实践
208 0
|
5月前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
5月前
|
JavaScript 算法 前端开发
Vue的虚拟DOM:Vue虚拟DOM的工作原理
【4月更文挑战第24天】Vue的虚拟DOM提升渲染性能,通过创建JavaScript对象树(虚拟DOM树)来跟踪DOM变化。当状态改变,Vue用新的虚拟DOM树与旧树对比(diff算法),找到最小DOM操作集合来更新真实DOM。优化策略包括减少状态变化、使用key属性和简化组件结构。理解虚拟DOM工作原理有助于Vue的性能优化。
|
5月前
|
JavaScript 前端开发 算法
什么是虚拟dom
什么是虚拟dom
|
5月前
|
JavaScript 前端开发 算法
为什么虚拟dom会提高性能?
为什么虚拟dom会提高性能?
62 0
|
5月前
|
JavaScript 算法 前端开发
什么是虚拟DOM?什么是diff算法?
什么是虚拟DOM?什么是diff算法?
34 0