This is the 20th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

The book continues, yesterday has given you a part of the introduction, then we continue to talk about ha

Record page performance at run time

1. Click on the gray circle in the upper left corner of Record, and it captures the performance metrics of the page as it runs

2. Wait a few seconds

3. Click Stop to Stop recording and analyze data. The analysis result is displayed on the performance panel

  • Operation area: including recording, refreshing page analysis, clearing results and a series of operations
  • Overview: A high-level overview of changes over time, including FPS, CPU, and NET
  • Detailed area: Analyzes the selected area from different perspectives. For example: Network, Frames, Interactions, Main, etc
  • Summary area: analysis down to the millisecond level, and collation of events by call level

Analysis of the frame rate

The primary metric of performance for any animation is the frame rate, and when the animation is running at 60 FPS, the user experience is better

1. Pay attention to the FPS chart. Whenever you see a red bar, it means a low framerate, which in turn affects the user experience. Generally speaking, the higher the green bar, the higher the framerate

  • A. FPS. Frames per second. The higher the green vertical line, the higher the FPS. The red blocks on the FPS chart indicate long frames that are likely to stall

  • B. the CPU. CPU resources. This area diagram indicates the type of event that consumes CPU resources

    Loading: Web communication and HTML parsing yellow Scripting: JavaScript execution purple Rendering: style calculation and layout (rearranging green Painting: repainting gray) Time spent on other events White (Idle) : Idle timeCopy the code

  • C. NET. Each colored bar represents a resource. The longer the bar, the longer it takes to retrieve the resource. The light-colored part of each bar represents the wait time (from the time the resource is requested to the time the first byte is downloaded)

2. Below the FPS chart, you can see the CPU chart. The color in the CPU chart corresponds to the color in the Summary TAB at the bottom of the Performance panel, which is a good hint to optimize whenever you see the CPU reaching maximum load for a long time

3. Hover the mouse over the FPS, CPU, or NET chart to display a screenshot of the page at that point in time. Move the mouse left and right to replay the recording. This is called scrubbing, and it’s useful for manually analyzing the animation process (see figure above)

Hovering over one of the green squares in the Frames area will show you the FPS for that particular frame, which can be well under 60 FPS per frame, as opposed to red

Identifying the root cause of the performance impact Now that poor page performance has been measured and verified, the next step is to ask why

Notice the Summary TAB, which, when no events are selected, shows which part of the browser’s time is spent throughout the recording process. As you can see, most of the page’s time is spent rendering

So the goal now is to reduce the amount of time the browser spends rendering

Expand the Main area to show the activity graph on the Main thread during a period of time. The X-axis represents the records during this period, and each Bar represents an event. The wider the Bar, the longer the activity takes. The Y-axis represents the call stack, and when you see events stacked on top of each other, it means that the event above caused the event below

There is a lot of data in the recording process. Click, hold, and drag to zoom in on the Individual Animation Frame Fired event in the OverView panel (the area with CPU, FPS, and NET diagrams). Information about the selected interval is displayed in Main and Summary

Notice the red triangle in the upper right hand corner of the AnimationFrame Fired event, which indicates that this event can cause serious problems (the AnimationFrame Fired event is triggered every time the requestAnimationFrame() callback is invoked)

Click on an Animation Frame Fired event, and the information related to that event is displayed in the Summary. Note the Reveal link. When clicked, DevTools will highlight the event that triggered the current Animation Frame Fired event

Also note the app.js:94 link, click to jump to the corresponding source code

This is a simple use of performance and can be added to……