Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom。当再次渲染时，会产生新的 vdom，渲染器会对比两棵 vdom 树，对有差异的部分通过增删改的 api 更新到 dom。

目前前端使用最多的就是 vue 或 react 了，我们在学习这两个框架的过程中，总有一个绕不开的话题：vnode，也就是虚拟 dom。什么是虚拟 DOM，引用一段 vue 官方的解释就是：

那么需要真实的操作DOM100w次,触发了回流100w次。每次DOM的更新都会按照流程进行无差别的真实dom的更新。所以造成了很大的性能浪费。如果循环里面是复杂的操作，频繁触发回流与重绘

Vue 源码中虚拟 DOM 与 Diff 算法的实现借鉴了 snabbdom 这个库，snabbdom 是一个虚拟 DOM 库，它专注于简单，模块化，强大的功能和性能。要彻底明白虚拟 DOM 与 Diff 算法就得分析 snabbdom 这个库到底做了什么？

传统diff计算两颗树形结构差异并进行转换，传统diff算法是这样做的：循环递归每一个节点；传统diff算法复杂度达到O(n^3 )这意味着1000个节点就要进行数10亿次的比较，这是非常消耗性能的

如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom， 使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。vue2.0才开始使用了virtual dom，有向react靠拢的意思。

React 是 facebook 出的一个前端框架. 设计的关键处就是性能问题。在本文中，我主要是介绍 Diff 算法以及 React 渲染 ，这样你可以更好的优化你的应用程序。