Both the
Open Chrome incognito mode
The main purpose is to ensure 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 square of the page moving
Limiting CPU speed
Some users have very good CPU performance and may not be able to analyze the problem (it is difficult to find performance problems on low-end devices), so you need to slow down the speed.
In the Chrome console, go to the “Performance” => “CPU” option and select the 4/6x Performance reduction
Add more cubes to find performance bottlenecks
Now that you’ve limited the CPU’s performance, you need to find the performance bottleneck.
Click “Add 10” several times to Add pieces to the page until you feel a noticeable lag in the movement of the pieces on the page.
At this point, it’s already obvious that the page is stuck.
Effect comparison before and after optimization
Click on the “Optimize” button to get an early feel for the before and after effects
You can obviously feel the smoothness of the page before and after optimization is significantly different.
Understand the Performance modules
How to analyze the problem, of course, depends on the data, here you need to use Chrome’s Performance function.
Switch the page to a non-optimized state and click “Record”.
The recording result is as shown in the figure below:
The above data may not be clear to beginners, but that’s ok, let’s take a step by step to understand what each part means
FPS
FPS, the number of frames per second on a page
- FPS = 60 for best performance
fps < 24It will give the user a sense of caton, because the human eye recognizes 24 frames
The area marked in blue in the figure is the information recorded by the FPS. If you zoom in to an area, you can see that the FPS consists of two parts:
- The red bar
- Green translucent bar
Switch to the optimized state
After switching to the optimized state and recording, the FPS data is as follows:
It can be seen that:
- There’s no red bar
- The height of the green translucent bar is significantly higher than without optimization
summary
- The red, which means the number of frames has dropped to the point where it affects the user experience, has been flagged by Chrome as a problem
- Green, the FPS index, the higher the height of all green columns, the better the performance
Understand the CPU
In the figure above, we capture the CPU data of a real business. In this case, I capture the performance of a personal brief, as shown below:
Some features of THE CPU data can be found by comparison:
- 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 section can record the screen frame by frame, can help to observe the state of the page, 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 specific frame. You can view the situation of a specific frame and hover over it to view the data.
You can see:
- The time interval for this frame is: 327ms
- The current FPS is 1000ms/327ms = 3fps
View more detailed information about a particular Frames block
Click on a Frames block to see more detailed data
Click on a Frames block to see more detailed data
- Duration, which waits for the current frame from 1.02s and renders it once 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 the “Rendering” option
Next, open the “FPS Meter “option
When checked, an FPS statistician will appear on the page, as shown in the upper left corner.
Do not check “FPS Meter “for now, which is not conducive to systematic learning
Find bottlenecks
Now that we know that the page has performance problems, it’s time to find out why.
To understand the Summary
When performance recording is complete, a Summary Summary is displayed at the bottom by default, showing global information.
The above shows the specific recording time between 0 and 4.90s:
- Script, takes 1534 ms
- Rendering, takes 2557 ms
- Painting, takes 281 ms
I mainly understand the time consuming of these three, but if I know the time consuming of these three, I still need to further investigate the problems.
Understand the Main
The red box in the image above is Main, where each block is what is being done in each frame
So far there is little to show for it. For easy viewing, we can in FPS, CPU, NET module, click to narrow the time interval:
As shown in the figure above, you can zoom in on Main by narrowing down the time interval. You can now see the “fire diagram” shown in Main, the stack of function calls. Among them:
- The X-axis is time
- The Y-axis represents the calling function, which contains the functions that are called in turn. The Y-axis occupies only one time dimension of the X-axis
Identify the problem, red triangle
In the image above, you can see the Animation Frame Fired with a red triangle in the upper right corner. This is Chrome’s way of automatically identifying the problematic parts, just like the red color in an FPS is used to identify the problem
‘Warning: Recurring Handler took 318.21ms’
Trace the problem, locate the code problem
Animation Frame Fired, Function Call
In the figure above, you can see the location of the function call code, which can be viewed by clicking:
Although it is identified that the problem is caused by method update, it is not clear enough, so further exploration is needed.
Further analyze the problem location
Attention!!!!!!isThere are smaller ones on the purple bar
As you can see, each purple bar has a small red triangle. As mentioned earlier, “The red triangle is Chrome’s help to automatically identify problems.” Check out the prompt message: Forced reflow is a likely performance bottleneck
Click to see the summary.
As you can see, the problem is located in line 136 of performancetest.html. Click to view and you can see that each element is being styled.
The problem with this code is that in each animation frame, it changes the style of each square and then queries the position of each square on the page. Because the style has changed, the browser does not know whether the position of each square has changed, so the square must be rearranged to calculate its position.
To avoid this situation, refer to the following: Avoid large, complex layouts and layout jitter
Compare the effect of optimization
As you can see, the optimized state, script, and render time are greatly reduced, so the FPS is significantly improved.
Performance optimization knowledge base
- The rail model was used to measure performance
- Based on reserve
- Overview of Rendering Performance
- Analysis of A Frame
A link to the
- Chrome performance test Demo
- Chrome performance test Demo – domestic
- Avoid large and complex layouts and layout jitter
- Performance optimization knowledge base
- The rail model was used to measure performance
- Based on reserve
- Overview of Rendering Performance
- Analysis of A Frame
Nuggets: A case study of Chrome runtime performance bottlenecks