虚拟DOM、DOM树、Diff算法

DOM树的概念：(一个网页呈现的过程)

1. 浏览器请求服务器，获取页面的HTML代码
2. 浏览器先在内存中，解析DOM结构，并在浏览器内存中渲染出一个DOM结构
3. 浏览器把DOM树渲染到页面上

• 如何才能把性能做到最优
  • 按需渲染页面(只重新渲染更新的数据到对应的页面)
• 如何实现按需渲染页面
• 获取内存中的新旧两颗DOM树，进行对比，得到需要被按需更新的DOM树

虚拟DOM：

• 本质：使用JS对象，来模拟页面上DOM嵌套关系
• 目的：为了实现页面元素的高效更新

DOM与虚拟DOM的区别：

• DOM：是浏览器中提供的概念，用JS对象，表示页面上的元素，并提供了操作元素的API
• 虚拟DOM：是框架中的概念，用JS对象，模拟页面上的DOM嵌套关系

Diff算法：

• tree diff:新旧两颗DOM树，逐层对比的过程，就是 Tree Diff
• component diff： 在进行Tree Diff 的时候，每一层中，组件之间的对比
  • 如果对比前后，组件类型相同，则暂时认为此组件不需要更新
• element diff：在component diff 的时候需要，当组件类型相同的时候需要进行元素之间的对比