我们知道，浏览器通过Http请求从各个异构服务器获取到html文档。会根据包含相关信息的请求头和请求体，将其解析并构建成一个DOM树。同时，根据文档获取到相关的css文档，这些文档里面包含了许许多多的CSSOM。最后，这颗DOM树和这些CSSOM会在浏览器内存中形成一个Render树，浏览器就是根据这个Render树渲染出我们最后看到的页面的。而这些过程都是发生在渲染引擎中的，这与负责执行动态逻辑的JavaScript引擎是相分离的。因此，为了JS能够方便操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用
问题就在这里，虽然通过暴露的接口，JS可以操作到DOM树中的节点。但是性能其实不是很高，特别是对于一些复杂的网页，添加删除节点会导致DOM节点的更新，这个开销是很大的。在之前，普遍都是通过JQuery来和DOM进行交互：
在网页设计越来越丰富，逻辑交互越来越复杂的情况下，频繁地进行DOM操作组件逐渐成为了性能的瓶颈。而以直接操作DOM的JQuery也不再像之前那么大一统。许许多多前端框架如雨后春笋般涌现，如AngularJS，React，Vue等。其中最火的当属React，它提供了一套不同的，高效的方案来更新DOM。这种全新的解决方案就是“Virtual DOM”:
如上图所所示，React会在内存中根据DOM创建一个虚拟的DOM树。基于React的开发并不直接操作DOM，而是通过操作这棵虚拟DOM进行的，每当数据变化的时候，React会重新构建整个DOM树，然后将当前DOM树和上个DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。既然最后还是会通过React来进行对DOM的更新，那为何还会有性能的提升呢？原因在于React并不总是马上对DOM树所做的更改进行更新，换而言之，就是你在虚拟DOM树上做的操作，不保证马上会产生实际的效果，它只会在你需要产生DOM树更新的时候进行更新。这样的一个机制就使得React能够等到一个事件循环的结尾，将若干个由数据影响的节点合并在一起，和实际DOM进行比较，只操作Diff部分，而不是像传统的js那样需要更新DOM操作，就更新DOM树一次，因而能达到提高性能的目的。同时，在保证性能的同时，React通过组件化的抽象概念，让开发者将不需要关注某个数据的变化该如何体现在DOM树上，只需要关系某个数据更新时，页面是如何Render的。
作者：wuqke
链接：https://www.jianshu.com/p/2a6146cdd19f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。