🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] --------- ## 虚拟DOM(Virtual DOM) ### 为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。如果对前端工作进行抽象的话,主要就是维护状态和更新视图;而更新视图和维护状态都需要DOM操作。其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性。 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差;有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单;但是聪明的程序员不可能满足于此,各种MVVM框架应运而生,有angularJS、avalon、vue.js等,MVVM使用数据双向绑定,使得我们完全不需要操作DOM了,更新了状态视图会自动更新,更新了视图数据状态也会自动更新,可以说MVVM使得前端的开发效率大幅提升,但是其大量的事件绑定使得其在复杂场景下的执行性能堪忧;有没有一种兼顾开发效率和执行效率的方案呢?引入Virtual DOM(虚拟DOM)。 运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM 节点,这样就造成了很大成都上的资源浪费。 利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM 。 当数据发生变化时,能够智能地计算出重新喧嚷组件的最小代价并应用到DOM操作上。 ![](https://box.kancloud.cn/a9217c605ba3fe38a78f4fe5feff781b_980x571.png) ![](https://box.kancloud.cn/c173153204d913a14956b184902dcd22_602x338.png) ![](https://box.kancloud.cn/522aa57607afe21ca360da3cac91862d_1560x390.png) * * * * * 更加深入的理解虚拟DOM,请阅读: 深度剖析:如何实现一个 Virtual DOM 算法 (戴嘉华) https://github.com/livoras/blog/issues/13