您说的对

innerHTML 和 虚拟Dom相比较

2022/6/27 vuejs源码innerHTML虚拟Dom性能

Vue3的源码里每一个warn函数的调用都会配合 _DEV_常量的检查

# 代码片段

innerHTML 创建页面

      const body = document.body;
      const html = `<div></div>`;
      body.innerHTML = html;
      
document.createElement 创建页面      
      const body = document.body;
      const div = document.createElement("div");
      body.append(div);
1
2
3
4
5
6
7
8
9
10
11

虚拟Dom创建页面的过程分为两步，第一步创建js对象，这个对象可以理解成真实Dom，第二步是递归的遍历虚拟Dom树并创建真实Dom。

# 虚拟Dom（VNnode） 创建页面的性能

  • 虚拟Dom（VNnode） 创建页面的性能
    1. 纯js运算 2. 新建js对象 3.渲染HTML字符串
  • innerHTML创建页面的性能
    1.Dom运算 2. 创建Dom元素 3.新建所有Dom元素

# 虚拟Dom（VNnode） 更新页面的性能

  • 虚拟Dom（VNnode） 更新页面的性能
  1. 纯js运算 2.创建新的js对象+Diff 3.渲染HTML字符串
  • innerHTML更新页面的性能
  1. Dom运算 2. 必要的Dom更新 3.销毁所有旧Dom 创建所有新的Dom
  • 从宏观的角度只看数量上差异，如果在同一个数量，那么认为他们没有差异，所以虚拟Dom创建页面的性能和 innerHTML创建页面的性能是一样的
  • 可以发现更新页面时虚拟Dom在js层面的运算要比创建页面时多了一个 diff的性能消耗，然而它毕竟也是js层面的运算（忽略不计了 谷歌大v8运行js还是非常快的），在观察Dom层面的运算，可以发现虚拟Dom在页面更新时，只更新必要的元素，而 innerHTML 的需要全量更新（也就是 销毁所有DOM元素 在创建所有新的DOm元素），这时虚拟Dom元素的优势就体现出来了。