Most of the performance tools you see on the web tend to focus on issues like the first screen. There are too many combined factors for this kind of problem. We’re going to talk about a little scene today.

Where is the problem

Performance optimization focuses on three phases. Load phase, interaction phase, close phase. We focus on the first two stages.

Loading phase, the general focus on the web here, its focus on key resources. The interaction phase, that’s what I want to talk about today. It focuses on rendering engines, JS occupancy, garbage collection, etc. I’m just scratching the surface. Go deeper into the business (what are the factors affecting our VUE project?)

What kind of tools

Figure, which shows the current heap memory, usage, frame count, number of vUE virtual nodes, and maximum node depth.

How to implement

1. Canvas painting technology is adopted for visual effect. 2. Heap memory and ratio come from the Performance API and its own simple computation. 3. Frame rate is derived from RAF and calculated with time difference. 4. Number of nodes. Get the node currently attached back to the root node vue.$parent and loop through it. Vue.$children. Length = $children. 5. Maximum depth.

  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;
  }
Copy the code

Leetcode test cases, white shit, white shit, white shit.

Finally realized the joy of programming.