我们知道Vue和React内部正在使用虚拟DOM。 我最近刚开始整理有关虚拟DOM的知识。 以下是我整理的笔记本。 容易理解，清晰易懂，推荐收藏。
使用大纲虚拟DOM前信息提要虚拟DOM的原因虚拟DOM (虚拟DOM )虚拟DOM角色1、虚拟DOM前信息提要浏览器获取HTML文档后，位于浏览器内核webkit的WebCore层
在我们用前端小刀种火种的时代，我们直接使用JavaScript操作DOM，但DOM树实际上由DOM模块管理。 浏览器内核具有用于存储DOM树的单独内存，但JavaScript引擎与此内存无关。 也就是说，不能直接操作实际的DOM树。
为了赋予JavaScript处理DOM的能力，浏览器在全局对象窗口中封装了用于JavaScript的文档对象，并为该对象提供了大部分DOM操作API (界面为
二、为什么使用虚拟DOM？ 当我们通过这些接口操作DOM时，JavaScript没有直接与DOM模块交互。 调用浏览器的DOM API后，浏览器操作DOM模块，将操作结果返回给JavaScript引擎。 正因为JavaScript需要通过DOM接口操作实际的DOM，所以才操作实际的DOM
JavaScript直接调用的是作为c实现的接口的实际DOM树的节点多、体积大、实际DOM操作过程的资源成本大； 修改实际DOM时，由于页面经常重绘，操作DOM越多，网页性能越差的历史原因，JavaScript出现在DOM中后，在设计上无法再用JavaScript管理DOM。 要使用JavaScript管理DOM，必须重新构建浏览器内核。 这在当时显然是不可能的。
综上所述，如何有效减少对实际DOM的操作是前端性能优化的重要部分，使用虚拟DOM是目前非常流行和有效的解决方案。
三、虚拟DOM (虚拟DOM )虚拟DOM是指由一般对象描述的DOM对象，不是实际的DOM，所以称为虚拟DOM。
从上一个概述可以看出，创建/处理实际DOM的资源开销特别大，仅使用常规对象模拟虚拟DOM可以有效减少实际DOM操作并提高网页性能
四、虚拟DOM的作用从上次提要可以看出，实际DOM的创建/操作，资源开销特别大，如下。
如果状态发生变化需要更新视图，可以使用虚拟DOM在内存中完成修改，减少对实际DOM的直接操作次数，并保持视图和状态之间的关系。 也可以使用diff算法比较修改后的虚拟DOM和修改前的实际DOM之间的差异。 只需更新实际DOM中的变化位置，即可减少重绘次数，提高渲染性能。 此外，虚拟DOM还作用于服务端呈现SSR、本机APP还原主动、小程序uni-app等其他方面； 前端原理系列：第1篇
下期预告：
Vue内部的虚拟DOM是由一个名为Snabbdom的开源库改造而成的，先开刀，先从基本使用Snabbdom开始，逐行分析Snabbdom的源代码，从中了解虚拟DOM的工作过程和原理
本期名词：
重做、差动算法、SSR、React Native、uni-app