虚拟DOM技术学习

发表于 | 评论数： | 阅读次数：

文档对象模型（DOM）通过将文档的结构（例如表示网页的 HTML）以对象的形式存储在内存中，将网页与脚本或编程语言连接起来。 虚拟 DOM 是声明式 Web 框架（如 React、Vue.js 和 Elm）中使用的文档对象模型 （DOM） 的轻量级 JavaScript 表示形式。

为什么需要虚拟 DOM

虚拟 DOM 本质上是在 DOM 基础上的更高级别的抽象，使用虚拟 DOM 将带来如下好处：

  • 虚拟 DOM 比 DOM 更新渲染的速度更快。这就是虚拟 DOM 的魅力，正常来说增加一层抽象，可以减少编程复杂度，但会影响运行效率，但是虚拟 DOM 却两者兼备。
  • 减少编程复杂度，更有利于前端组件式开发。

关键思想

  • 如何创建 DOM 的虚拟表示
  • 如何比较不同虚拟 DOM 节点之间的差异
  • 应用虚拟 DOM 节点差异到真实的 HTML 元素

具体原理

请参考：

参考链接

  1. A virtual DOM in 200 lines of JavaScript,by Marcelo Lazaroni.
  2. 文档对象模型（DOM）,by mozilla.
  3. Virtual DOM,by wikipedia.