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

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

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

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

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

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

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

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

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