网上看到较多的性能工具往往关注于类似首屏等问题。这类问题综合因素太多，太大。我们今天谈一个小的场景。

问题在哪

性能优化关注的三个阶段。加载阶段，交互阶段，关闭阶段。我们主要关注前两个阶段。

加载阶段，网上普遍注重此处，其重点在关键资源。
交互阶段，即我今天想探讨的问题。它的重点在渲染引擎，js占用，垃圾回收等。我就只探究冰山一角。再深入业务一些（我们的vue项目受哪些因素影响）

什么样的工具

如图，它展示了当前时刻的堆内存，占用率，帧数，vue的虚拟节点数目，及最大的节点深度。

怎么实现

1，视觉效果采用canvas绘画技术。
2，堆内存及占比来自performance api，及自己的简单计算处理。
3，帧率来自raf，结合时间差计算。 4，节点数。通过获取当前挂在节点追溯到根结点vue.$parent,循环找到。然后广度遍历，通过vue.$children.length累计可得。 5，最大深度。

  private getDeep(node: Vue) {
    let deep = 0;
    for (let i = 0; i < node.$children.length; i++) {
      deep = Math.max(deep, this.getDeep(node.$children[i]));
    }
    return deep + 1;
  }

白嫖leetcode的测试用例，白嫖，白嫖，白嫖。
终于体会到了编程的快乐。