Both the

Open Chrome Incognito mode

The main purpose is to ensure that there is a clean test environment that is not affected by other factors.

Open test address

Google performance test address googlechrome. Making. IO/devtools – sa…

Domestic performance test address: gitee.com/hellojamesz…

You can see the following screen:

You can see the little blue squares on the page moving

Limiting CPU speed

Some users’ COMPUTERS have good CPU performance and may not be able to analyze the problem well (it is difficult to find the performance problem of low-end configuration devices), so they need to slow down.

On the Chrome console, go to “Performance” => “CPU” and select reduce Performance by 4/6 times

Add better cubes and find performance bottlenecks

Having limited CPU performance above, it’s time to look for performance bottlenecks.

Click “Add 10” several times to Add blocks to the page until you feel a noticeable lag as the blocks move on the page.

At this point, you can obviously feel the page is very stuck.

Effect comparison before and after optimization

Click the “Optimize” button to see how it compares before and after

You can obviously feel the page fluency before and after optimization is obviously different.

Understand Performance modules

How to analyze problems depends on data, and you need to use Chrome’s Performance function.

Switch the page to a non-optimized state and click “Record”.

The recording result is as follows:

The above data beginners may not understand, it doesn’t matter, let’s understand the meaning of each part step by step

FPS

FPS refers to the number of frames per second on a page

  • FPS = 60 for best performance
  • fps < 24It makes the user feel caton, because the human eye recognizes 24 frames

The area marked in blue, the information recorded by an FPS, is zoomed in on an area. As you can see, an FPS is made up of two parts:

  • The red bar
  • Translucent green strips

Switch to the optimized state

After switching to the optimized state and recording, the FPS data is as follows:

As can be seen:

  • There’s no red bar
  • The height of the green translucent strip, significantly higher than when there is no optimization

summary

  • In red, the number of frames has dropped to the point where it affects the user experience, and Chrome has flagged it, and this is a problem
  • Green, the FPS index, the higher the height of all green columns, the better performance

Understand the CPU

In the figure above, the position under FPS, namely CPU information, we collected some CPU data of a real business. Here I captured the performance of personal computer, as shown in the figure below:

Comparison reveals some characteristics of CPU data:

  • The CPU has two states
    • Full of color
    • Not full of color
  • Whether the CPU is full of color is related to the FPS

Understand the.net

NET part can record the screen frame by frame, which can help observe the state of the page and analyze the first screen rendering speed

Understand the Frames

View the FPS for a particular frame

The Frames section is mainly used to view the FPS of a particular frame. You can view a particular frame and hover over it to view the data.

You can see:

  • The interval of this frame is: 327ms
  • The current FPS is 1000ms/327ms = 3fps. This is mainly reflected in the 327ms interval between page refresh

View more detailed information about a Frames block

Click on a Frames block to view more detailed data

Click on a Frames block to view more detailed data

  • Duration: the current frame waits from 1.02s and renders after 1.02s+326.97ms
  • 326.97 FPS, 1000 ms/ms = 3 FPS
  • At the bottom is the view portrait of the current frame

Learn about FPS shortcuts

In Chrome, there is also a More Tools option, select “Rendering”

Next, turn on the “FPS Meter “option

When checked, a FPS statistician appears on the page, as shown in the upper left corner.

Leave “FPS meter” unchecked for the time being, which is not conducive to systematic learning

Find bottlenecks

We already know that the page has a performance problem, so it’s time to start looking for the cause.

To understand the Summary

By default, when recording performance, a Summary Summary is displayed at the bottom, showing global information.

The specific recording time from 0 to 4.90s is shown above:

  • Script, takes 1534 ms
  • Rendering, takes 2557 ms
  • Painting, takes 281 ms

We mainly understand the three time-consuming, but further investigation is needed to understand the problems in the three time-consuming.

Understand the Main

The red box in the image above is Main, where each block is what is done in each frame

So far there’s not much to see. For easy viewing, we can click on the FPS, CPU, and NET modules to narrow the time interval:

Zoom in on Main by narrowing the time interval, as shown above. You can now see the “flame chart” shown in Main, the stack of function calls. Among them:

  • The X-axis is time
  • The Y-axis represents the function called, which also contains the functions called in sequence. The Y-axis occupies only one time dimension of the X-axis

Identification problem, red Triangle

In the image above, you can see that Animation Frame Fired has a red triangle in the upper right corner. This is Chrome’s automatic help to identify the problematic parts, just like the red color in FPS, to identify the problem

The figure above may end up at the tip “Warning: Recurring handler took 318.21ms “, which means the Recurring handler took 318.21ms

Trace problems and locate code problems

Click “Function Call” under Animation Frame Fired

As shown above, you can see where in the function call code, which you can click to view:

Although it was located that the problem was caused by the method update, it was not clear enough, so further exploration is needed.

Further analysis of the problem location

Attention!!!!!!isThere are smaller ones on the purple bar

As you can see, each purple bar has a small red triangle. The red triangle is Chrome’s help to automatically identify problems. Forced reflow is a likely performance bottleneck

Click here for a summary.

As you can see, the problem is located in line 136 of performanceTest. HTML. Click to view and you can see the style changes for each element.

The problem with this code is that within each animation frame, it changes the style of each square and then queries the position of each square on the page. Because of the style change, the browser does not know if the position of each square has changed, so it must rearrange the square to calculate its position.

To avoid this problem, see: Avoid large, complex layouts and layout jitter

Compare the effects of optimization

As you can see, the optimized state, script, and render times have all been greatly reduced, resulting in a significant increase in FPS.

Performance optimization knowledge base

  • Use rail model to measure performance
  • Based on reserve
    • Overview of Rendering Performance
    • A Frame analysis

A link to the

  • Chrome performance test demo
  • Chrome performance test demo- domestic
  • Avoid large, complex layouts and layout jitter
  • Performance optimization knowledge base
    • Use rail model to measure performance
    • Based on reserve
      • Overview of Rendering Performance
      • A Frame analysis