什么是 window 对象? 什么是 document 对象?

• window对象：是指浏览器打开的窗口。
• document对象：代表整个 HTML 文档，可用来访问页面中的所有元素。它也是window对象的一个属性

⭐ 什么是 Virtual DOM，为何要用 Virtual DOM？

Virtual DOM 的概念有很多解释，分别是：一个对象，两个前提，三个步骤。

• 一个对象 指的是 Virtual DOM 是一个基本的 JavaScript 对象，也是整个 Virtual DOM 树的基本。
• 两个前提 分别是
  • JavaScript 很快和直接操作 DOM 很慢，这是 Virtual DOM 得以实现的两个基本前提。
  • 得益于 V8 引擎的出现，让 JavaScript 可以高效地运行，在性能上有了极大的提高。
  • 直接操作 DOM 的低效和 JavaScript 的高效相对比，为 Virtual DOM 的产生提供了大前提。
• 三个步骤 指的是 Virtual DOM 的三个重要步骤，分别是：
  • 生成 Virtual DOM 树
  • 对比两棵树的差异
  • 更新视图。

虚拟 DOM 更新 + diff 算法

1.生成 Virtual DOM 树：

DOM 是前端工程师最常接触的内容之一，一个 DOM 节点包含了很多的内容，但是抽象出一个 DOM 节点却只需要三部分：节点类型，节点属性、子节点。所以围绕这三个部分，我们可以使用 JavaScript 简单地实现一棵 DOM 树，然后给节点实现渲染方法，就可以实现虚拟节点到真实 DOM 的转化。

2.对比两棵树的差异：

比较两棵 DOM 树的差异是 Virtual DOM 算法最核心的部分，这也是我们常说的的  Virtual DOM 的 diff 算法。在比较的过程中，我们只比较同级的节点，非同级的节点不在我们的比较范围内，这样既可以满足我们的需求，又可以简化算法实现。

比较“树”的差异，首先是要对树进行遍历，常用的有两种遍历算法，分别是深度优先遍历和广度优先遍历，一般的 diff 算法中都采用的是深度优先遍历。对新旧两棵树进行一次深度优先的遍历，这样每个节点都会有一个唯一的标记。在遍历的时候，每遍历到一个节点就把该节点和新的树的同一个位置的节点进行对比，如果有差异的话就记录到一个对象里面。

例如，上面的 div 和新的 div 有差异，当前的标记是 0，那么：patches[0] = [{difference}, {difference}, ...]。同理 p 是 patches[1]，ul 是 patches[3]，以此类推。这样当遍历完整棵树的时候，就可以获得一个完整的差异对象。

在这个差异对象中记录了有改变的节点，每一个发生改变的内容也不尽相同，但也是有迹可循，常见的差异包括四种，分别是：

• 替换节点