This article is from chrome’s official documentation: Portal (requires scientific Internet access)

Chrome’s developer tools provide a number of efficient tools for analyzing page performance. I used to only use some basic functions, but recently I went through the official documentation in detail, especially the use of the Performance panel (mostly the old Timeline panel) (which requires a relatively new version of Chrome).

The purpose of this article is to share the basics of performance analysis using Chrome, without going too far into the specific causes of performance problems

The preparatory work

First, there are a few things to prepare for the analysis:

  1. Go into incognito mode to avoid interference from browser plugins
  2. Open theperformanceTAB
  3. Click the pinion icon on the far right of Settings and open it if it is a mobile projectCPUThrottling switch, select the corresponding one according to computer performance (used to simulate the performance of mobile phone)
  4. Open the screenshotScreenshotsTake a screenshot of each frame during the process
  5. If it’s checkedmemoryYou can also see the different components of the memory footprint (ex:Heap,node…) In the recording process changes, according to the change of the situation to see the general garbage collection cycle, and whether there are obvious memory leaks.

Official case Study

According to the above preparation to open, if not open temporarily look at my side of the picture taken;

record
loading

demo

Let’s first introduce the meaning of the information in each part of the figure:

  1. The right side of the picture is marked with:FPS; CPU; NET

  • First, the Analyze frames per second frame rate; The red bar on an FPS shows that the low framerate has affected the user experience, and generally the higher the green bar, the higher the framerate, the better the experience. Horizontal bars do not appear when frame rates do not affect usage.

  • Next comes cpu-related analysis: the following figure

    CPUThe corresponding bar is belowsummary TabThe color bars in this part also correspond to each other. The higher the proportion rightCPUThe more you consume. fromsummary TabWe can also see that most of our time is actually spent inrenderingThis also indicates that the problems in our demo are most likely in the rendering-related code.

  • Moving the mouse left and right on FPS,CPU, or NET allows you to view screenshots at various points in time, which is especially useful when analyzing the various stages of animation execution and loading.

  1. Then the part with the name on the right:

  • If there is a Network request in the recording period, there is also a column Network above the frame, which is colored to indicate the request for different resources

  • Then there’s the Frames area: hover over it to read the frame rate at the time

  • While recording, press CMD + Shift + P and type Show Rendering (open the live View frame rate panel) to see the real-time frame rate change

  • Main represents the main thread, and a bar represents the execution of an event (function). The longer the length, the more time it takes; Vertical represents the call stack. If the upper right corner of these bars is red, it indicates that there may be a performance problem during the execution of the code.

At this point, we can see that many of the yellow bars in the image above are red in the upper right corner, so let’s check out the performance bottlenecks in the official demo by clicking on this section in main: Click on the Animation Frame Fired event and you can see the information below. And you can locate the relevant code in the Source panel. According to the code segment located, reading the code, we can see that the problem is in the selected line of code with the blue background

Why is there a problem with this code? It’s mandatory to trigger layout, which involves rearranging and redrawing, but I won’t expand here. Those who are interested can click on the reference links below to learn more.

  • Reference link 1- Google’s official documentation
  • Reference Link 2

The performance Tab is the same as the Summary Tab.

  1. Bottom-Up Tab


    在 TimelineSelect a period of time and clickBottom-UpThe resulting image shows the time taken by each operation performed by the browser

  2. Call-tree Tab

    Just click onCall TreeThe image above shows the basic actions of the browser (event execution, drawing…). Time taken

  3. Event log Tab

    Just click onEvent LogYou get the figure above: you can view the elapsed time of event execution in the order in which the events occurred during the selected time.

The images in this article are from the official Chrome Developer Tools documentation.

Spread the word

This article is published in Front of Mint Weekly. Welcome to Watch & Star.

Welcome to the discussion. Give it a thumbs up before we go. ◕ ‿ ◕. ~