虚拟DOM为何出现以及性能问题

传统的前端编程方式是命令式编程,即直接操纵DOM,告诉浏览器该怎么干。这样的问题就是,大量的代码被用于操作DOM元素,且代码可读性差,可维护性低。

而React、Vue这些数据驱动的前端框架的出现,将命令式编程变为了函数式编程,从而大幅提升代码的可读性、可维护性。

这些框架纵然摒弃了直接操作DOM,我们只要关心数据的变动,DOM的操作由框架完成。但是这样做带来了一些性能问题。

在最原始的情况下,框架一旦发现数据发生了变动就对整个页面进行更新。这样的做法效率低下,因为数据的变动而导致的页面变动很可能只是局部的,直接对整个页面进行更新造成了不必要的性能消耗。

所以人们很自然的就会想到将因数据变动而新生成的DOM结构与已经显示出来的DOM结构进行比较,找出两者的不同处,再对这些不同进行重新渲染即可。有的放矢,从而提升性能。

而那个仅在内存中未显示出来的DOM结构就是所谓的虚拟DOM,找出两者不同的算法就是Diff算法

不过需要注意的是,虚拟DOM和Diff算法的出现是为了解决由命令式编程转变为函数式编程、数据驱动后所带来的性能问题的。换句话说,直接操作DOM的性能并不会低于虚拟DOM和Diff算法,甚至还会优于

这么说的原因是因为Diff算法的比较过程,比较是为了找出不同从而有的放矢的更新页面。但是比较也是要消耗性能的。而直接操作DOM就是有的放矢,我们知道该更新什么不该更新什么,所以不需要有比较的过程。所以直接操作DOM效率可能更高。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页