preface

Watch the second episode of the Series 10 minutes to get started with Chrome performance analysis templates

Learning article: juejin.cn/post/684490… Author: Peppermint front end

What is chrome Performance Analysis Template?

Where have you been? As the saying goes, know yourself and know your enemy. We must understand how performance is allocated to do a good job in performance optimization. The performance analysis template tells you the answer!

From load, script, render, paint and other, idle, this pie chart gives us a clear view of performance.

Why use this panel?

No use, no use.

Begin to learn

# Preparations

Enter stealth mode CTRL + Shift +N

Open the Performance TAB

Click on the gear in the picture. In order to simulate the mobile terminal, we select the corresponding CPU throttling according to the computer performance.

Enabling the Screenshot function

In addition, if memory is checked, you can also see the approximate garbage collection cycle and whether there are significant memory leaks.

# Ready for real.

The official case

We first get all kinds of data analysis before optimization: first click on the top left corner record dot record version of runtime performance before optimization, after a period of time click stop. The refresh symbol next to the dot (HHH) is the button used for Loading’s performance analysis.

Visit the performance analysis panel

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

  1. (Analyze frames per second

The red bar indicates that a 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.

  1. CPU

The CPU corresponds to the pie chart of the summary below. The larger the CPU, the larger the CPU consumption.

As you can see from this figure, the most CPU consumption is spent on page rendering.

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.

The left part of the picture:

  1. 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

  2. Click on the frames field to display the current frame rate

  1. 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

  2. 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.

  3. You can see that many of the yellow bars in the image above are red in the upper right corner. Click to expand this part of 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

    What exactly went wrong is not discussed.Redraw and rearrangeAlso check out the official Google docs

Add a few tabs of the same class as the Summory TAB

  1. Bottom-up, which shows the time taken by each operation performed by the browser
  2. Call Tree, representing the basic operations of the browser (event execution, drawing…) Time taken
  3. Event Log: you can view the time occupied by Event execution based on the sequence of events occurring within the selected time.