Question

为什么 React 的 virtual DOM 比原生的DOM 渲染性能更好

Answer 1

DOM元素是通过宿主对象的方式提供给JS运行时的。

DOM <------------> JS Runtime
DOM作为html文档模型，非常复杂，通常是由浏览器专门独立的模块去实现。当js运行时有需要进行DOM操作的时候，JS运行时向DOM接口发出请求，然后等待DOM结果返回。这是一个阻塞的过程，因此效率比较低。
而Virtual DOM就是为解决此问题而生。在与真正的DOM层之间加入了一个虚拟DOM层，对DOM的操作都首先映射到对Virtual DOM的操作。然后Virtual DOM通过tree diff算法，通过最小化DOM操作，一次性的把DOM的更改提交到真实的DOM上去。
在没有Virtual DOM之前，我们都是通常会做很多多余的DOM操作，举例来说明：
当某个信息表格我们通过ajax请求获取更新的数据之后，我们通常把整个表格都更新一遍，但是里面可能只有某几个数据项发生更新了。这时候就产生了不必要的DOM操作。而现在因为有了Virtual DOM的存在，通过diff算法，只在发生了变化的DOM元素上进行操作，这就大大减少了DOM操作的频次，使得性能更优。
并且Virtual DOM的diff算法，建立在特殊的假设之上，使得diff操作的算法效率由O(n^3)降低为O(n)，额外diff的性能损耗可以忽略不计，而减少DOM操作带来的优化却是显著的。