Virtual Dom

1. JS 操作真实 DOM 的代价

用我们传统的开发模式，原生 JS 或 JQ 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中，我需要更新 10 个 DOM 节点，浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作，因此会马上执行流程，最终执行 10 次。

例如，第一次计算完，紧接着下一个 DOM 更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算 DOM 节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作 DOM 的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

2. 为什么需要虚拟 DOM，它的好处

Web 界面由 DOM 树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个 DOM 节点发生了变化

虚拟 DOM 就是为了解决浏览器性能问题而被设计出来的。

如前，若一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地一个 JS 对象中，最终将这个 JS 对象一次性更新到 DOM 树上，再进行后续操作，避免大量无谓的计算量。

所以，用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM)上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。

3. 虚拟 DOM 的实现

/**
 * Element virdual-dom对象定义
 * @param {String} tagName - dom元素名称
 * @param {Object} props - dom属性
 * @param {Array<Element|String>} - 子节点
 */

/**
 * Element 生成虚拟dom
 */
function Element(type, props, children) {
  this.type = type;
  this.props = props;
  this.children = children;

  // 如果有key值, 则要设置key值
  if (props.key) {
    this.key = props.key;
  }

  // diff算法才需要

  // // 记录子节点个数
  // let count = 0
  // children.forEach( (child, index) => {
  //   // 区分是子节点是元素节点还是文字节点
  //   if (child instanceof Element) {
  //       count += child.count     // 如果是元素节点, 则判断子节点下面还有多少个子节点
  //   } else {
  //       children[index] = '' + child   // 如果不是子节点, 把子文档节点里的文字记录到对应的children中, 等于重复赋值
  //   }
  //   count++
  // })
  // // 记录子节点个数
  // this.count = count
}

/**
 * render 将virdual-dom对象渲染为实际 DOM 元素
 * 绑定为Element的一个实例方法, 要创建一个对象才能使用
 */
Element.prototype.render = function() {
  let el = document.createElement(this.type); // 创建元素节点
  let props = this.props; // 获取节点的属性

  // 设置节点的DOM属性
  for (let propName in props) {
    let propValue = props[propName];
    el.setAttribute(propName, propValue);
  }

  // 处理子节点, 没有子节点的情况视为空文档节点
  let children = this.children || [];
  children.forEach((child) => {
    let childEl =
      child instanceof Element // 判断子节点为元素节点还是文档节点
        ? child.render() // 如果子节点也是虚拟DOM(元素节点)，递归构建DOM节点
        : document.createTextNode(child); // 如果是文档节点，只构建文本节点
    el.appendChild(childEl); // 将处理结果追加到当前节点里面
  });
  return el;
};

// 测试
// let virtualDom = createElement(
//   'div',
//   {id: '1'},
//   [
//     createElement('ul', {id: '2'}, ['this is ul'])
//   ]
// )

/**
 * Element 对象创建
 */
function createElement(tagName, props, children) {
  return new Element(tagName, props, children);
}

<!-- 生成真实DOM的测试 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>

  <script src="./element.js"></script>
  <script>
    // 创建一个createElement实例对象
    let el = createElement;
    let app = el("div", { id: "virtual-dom" }, [
      el("p", {}, ["Virtual DOM"]),
      el("ul", { id: "list" }, [
        el("li", { class: "item" }, ["Item 1"]),
        el("li", { class: "item" }, ["Item 2"]),
        el("li", { class: "item" }, ["Item 3"]),
      ]),
      el("div", {}, ["Hello World"]),
    ]);

    console.log(app);
    let realDom = app.render(); // 虚拟dom生成真实dom
    document.body.appendChild(realDom);
  </script>
</html>

Virtual Dom

# Virtual Dom

# 1. JS 操作真实 DOM 的代价

# 2. 为什么需要虚拟 DOM，它的好处

# 3. 虚拟 DOM 的实现

Virtual Dom

1. JS 操作真实 DOM 的代价

2. 为什么需要虚拟 DOM，它的好处

3. 虚拟 DOM 的实现