虚拟DOM及diff算法

一、虚拟DOM

1、JSX

是一种看起来非常像 HTML 的 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。
在 React 代码执行之前，Babel 会对将 JSX 编译为 React API.

• JSX

<div className="container">
  <h3>Hello React</h3>
  <p>React is great </p>
</div>

• React API

React.createElement(
  "div",
  {
    className: "container"
  },
  React.createElement("h3", null, "Hello React"),
  React.createElement("p", null, "React is great")
);

2、基本概念

• 出现目的

大多数 JavaScript 框架对于 DOM 的更新效率非常低下。
例如假设你有包含十个项目的列表，你仅仅更改了列表中的第一项，大多数 JavaScript 框架会重建整个列表，这比必要的工作要多十倍。
为了解决这个问题，React 普及了一种叫做 Virtual DOM 的东西，Virtual DOM 出现的目的就是为了提高 JavaScript 操作 DOM 对象的效率。

• 是什么

在 React 中，每个 DOM 对象都有一个对应的 Virtual DOM 对象，它是 DOM 对象的 JavaScript 对象表现形式，其实就是使用 JavaScript 对象来描述 DOM 对象信息，比如 DOM 对象的类型是什么，它身上有哪些属性，它拥有哪些子元素。
可以把 Virtual DOM 对象理解为 DOM 对象的副本，但是它不能直接显示在屏幕上。

{
  type: "div",
  props: { className: "container" },
  children: [
    {
      type: "h3",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "Hello React"
          }
        }
      ]
    },
    {
      type: "p",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "React is great"
          }
        }
      ]
    }
  ]
}

• 如何提升效率

精准找出发生变化的 DOM 对象，只更新发生变化的部分。
在 React 第一次创建 DOM 对象后，会为每个 DOM 对象创建其对应的 Virtual DOM 对象，在 DOM 对象发生更新之前，React 会先更新所有的 Virtual DOM 对象，然后 React 会将更新后的 Virtual DOM 和 更新前的 Virtual DOM 进行比较，从而找出发生变化的部分，React 会将发生变化的部分更新到真实的 DOM 对象中，React 仅更新必要更新的部分。
Virtual DOM 对象的更新和比较仅发生在内存中，不会在视图中渲染任何内容，所以这一部分的性能损耗成本非常小。

3、执行流程

• 创建 Virtual DOM

在 React 代码执行前，JSX 会被 Babel 转换为 React.createElement 方法的调用，在调用 createElement 方法时会传入元素的类型，元素的属性，以及元素的子元素，createElement 方法的返回值为构建好的 Virtual DOM 对象。

• 渲染 Virtual DOM 对象为 DOM 对象

通过调用 render 方法可以将 Virtual DOM 对象更新为真实 DOM 对象。
在更新之前需要确定是否存在旧的 Virtual DOM，如果存在需要比对差异，如果不存在可以直接将 Virtual DOM 转换为 DOM 对象。

• Virtual DOM 比对

在进行 Virtual DOM 比对时，需要用到更新后的 Virtual DOM 和更新前的 Virtual DOM，更新后的 Virtual DOM 目前我们可以通过 render 方法进行传递。
对于更新前的 Virtual DOM，对应的其实就是已经在页面中显示的真实 DOM 对象。其实就是通过render方法的第三个参数获取的，container.firstChild。

• 组件更新

在 diff 方法中判断要更新的 Virtual DOM 是否是组件。
如果是组件再判断要更新的组件和未更新前的组件是否是同一个组件，如果不是同一个组件就不需要做组件更新操作。
如果是同一个组件，就执行更新组件操作，其实就是将最新的 props 传递到组件中，再调用组件的render方法获取组件返回的最新的 Virtual DOM 对象，再将 Virtual DOM 对象传递给 diff 方法，让 diff 方法找出差异，从而将差异更新到真实 DOM 对象中。

二、diff算法

1、作用

diff算法会计算两颗树形结构差异并进行转换，计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。传统diff算法会循环递归每一个节点 。

2、react优化的diff策略

• 忽略Web UI中DOM节点跨层级移动 。
• 拥有相同类型的两个组件产生的DOM结构也是相似的。
• 对于同一层级的一组子节点，通过分配唯一唯一id进行区分（key值）

3、三个优化

• tree diff

把dom tree分层级，对于两个dom tree只比较同一层次的节点，忽略Dom中节点跨层级移动操作，只对同一个父节点下的所有的子节点进行比较。如果对比发现该父节点不存在则直接删除该节点下所有子节点，不会做进一步比较，这样只需要对dom tree进行一次遍历就完成了两个tree的比较。

• component diff

同一类型组件遵从 tree diff 比较v-dom树 , 不同类型组件，替换下整组件下的所有子节点 , 如果Virtual Dom没有变化，React允许开发者使用shouldComponentUpdate（）来判断该组件是否进行diff，运用得当可以节省diff计算时间，提升性能 。

• element diff

React会从左到右进行新集合遍历，通过key值判断两个对比集合中是否存在相同的节点，如果为true则进行移动操作，否则不执行该操作。

三、Fiber

1、问题

核心问题：递归无法中断，执行重任务耗时长。 JavaScript 又是单线程，无法同时执行其他任务，导致任务延迟页面卡顿，用户体验差。

1. 为了使得react渲染过程中可以被中断，让位给高优先级的任务，把控制权交还给浏览器，让浏览器在空闲的时候再恢复渲染。
2. 对于计算量比较大的js计算或者dom计算，不会显得特别卡顿，而是一帧一帧的有规律的执行任务

2、方案

1. 利用浏览器空闲时间执行任务，拒绝长时间占用主线程
2. 放弃递归只采用循环，因为循环可以被中断
3. 任务拆分，将任务拆分成一个个的小任务

3、细节问题

• 类似generator

const tasks = [];
function run(){
    let task;
    while(task === tasks.shift()){
        execute(task)
    }
}

const tasks = [];
function * run(){
    let task;
    while(task === tasks.shift()){
        if(hasHighPriorityTask()){
            yield;
        }
        execute(task)
    }
}

1. generator有类似的功能，为什么不直接使用?

• 要使用generator， 需要将涉及到的所有代码都包装成generator*的形式，非常麻烦，工作量很大.
• generator内部是有状态的，我们已经执行完了do Expend sive Work A和do Expend sive Work B， 还未执行do ExpendsiveWorkC. 如果此时b被更新了，那么在新的时间分片里，我们只能沿用之前获取到的x，y结果.

function * doWork(a， b， c) {
    const x=doExpendsiveWorkA(a) ；
yield；
    const y=doExpendsiveWorkB(b) ；
yield；
    const z=doExpendsiveWorkC(x， y， c) ；
    return z；

2. 如何判断当前是否有高优任务呢?

• 当前js的环境其实并没有办法去判断是否有高优任务，只能约定一个合理的执行时间，当超过了这个执行时间，如果任务仍然没有执行完成，中断当前任务，将控制权交还给浏览器.
• 每秒60帧，1000ms/60f=16ms，requestIdLeCallback使浏览器在有空的时候执行我们的回调，这个回调会传入一个参数，表示浏览器有多少时间供我们执行任务.

3. 浏览器什么时候有空？

• 处理用户输入事件
• Js的执行
• request Animation调用
• 布局Layout
• 绘制paint
  16ms 10ms
  6ms -> requestIdLeCallback .

4. 浏览器很忙怎么办？

• requestIdLeCallback timeout参数，如果超过这个时间回调还没执行，那么会在下一帧强制执行。
• requestIdLeCallback 兼容性很差，通过messageChanneL模拟实现，了requestIdLeCallback的功能。

5. timeout超时后就一定要被执行吗?

• 不是的，react里预订了5个优先级的等级，

• Immediate最高优先级， 这个优先级的任务应该被马上执行不能中断
• User Blocking这些任务一般是用户交互的结果， 需要即时得到反馈
• Normal不需要用户立即就感受到的变化， 比如网络请求
• Low这些任务可以延后，但是最终也需要执行
• IdLe可以被无限期延后