First, preliminary exploration, according to the phenomenon found problems

The performance of Chrome has been known for a long time, but there is no special authority and up-to-date learning materials, this time to remember the pain, directly read the English document, bit by bit to eat this, this note is based on Chrome 59

Step 1: Open Chrome in Incognito mode

The goal is to avoid caching and unnecessary problems

Step 2: Open the test address

Google performance test address googlechrome. Making. IO/devtools – sa… You can see the following page:


Step 3: Limit CPU speed

Because some users have very high CPU performance, they can’t analyze the mobile side well, or find performance problems on lower level devices, so we need to slow down, find the performance item in the console, find the CPU option, and select reduce performance by 4x or 6x

Add motion cubes to identify performance bottlenecks

After limiting CPU performance, click the Add 10 button repeatedly to Add blocks to the page until you feel the block movement on the page obviously stuttering





Take a look at the results.

Click Optimize to see the effect


Once optimized, try again without optimizing

Click the un-optimize button again, and you’ll see it’s jammed again

Ok, so now that you can see the difference in performance through the phenomenon, it’s time to analyze the phenomenon

2. Understand each module of Performance

How to analyze the phenomenon, it will depend on the data, and this will use Chrome performance first cut the page to the non-optimized state, click “Record” button

Record 4S-5S:

Then you can see the recording effect:


Step 1: Understand Fps

FPS: refers to the number of frames per second on a page. FPS = 60 excellent performance. FPS < 24 will make the user feel sluggish, because the human eye mainly recognizes 24 frames














Action :1 Switch to the Optimized state

At this point, switch the optimized state to the optimized state and record the performance again:





It can be seen that: 1, there is no red bar and 2, the height of the green translucent bar is obviously much higher than the height of the scene that is not optimized

Conclusion:

  • Red: means the frame count has dropped to the point where it affects the user experience. Chrome has already marked it for you

  • Green: This is the Fps index, the higher the height of all the green columns, the better the performance

Step 2: Understand the Cpu








Comparison reveals some characteristics of CPU data:

  • 1. CPU has two states:

    • (1) Full of color

    • (2) not full of color

  • 2. Whether the CPU is full of color is related to the FPS

Step 3: Understand Net

Net part can record the screen frame by frame, can help observe the state of the page, the main use, can help analyze the first screen rendering speed

Step 4: Understand Frames

1. View the FPS for a particular frame

2. Hover over it to view data


  • The interval for this frame is 129.1ms

  • The current FPS is 1000ms/129.1ms = 7.75fps, which is about 8fps

The main point here is that the interval between page refreshes is 129.1ms

3. Click on the Frames block for more detailed data


  • 1, duration means that the current frame waits from 796.31ms, and then renders once after 796.31ms+127.73ms

  • 2. FPS is still the old algorithm, 1000ms/127.73ms is about 7fps

  • 3. At the bottom is the view portrait of the key frame

Learn about FPS shortcuts

1. In Chrome, there is more Tools, select rendering and Animation

2. Enable the FPS Meter switch

3. Directly on the page, a FPS stat appears


Three, find the bottleneck

We already know that our test page has performance issues, so why?

Step 1: Understand the Summary

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


  • 1. Script execution takes 1952.8ms

  • 2, render takes 2986.8ms

  • 3. Repainting takes 472.1ms

It is mainly the three time consuming parts. Knowing the three time consuming parts, I just know that there is no problem, but what is the specific problem?

Step 2: Learn about Main

Above, circled in red, is the Main section, where each block is what is done in each frame

To make it easier for us to watch, we can click on the FPS, CPU, net module to narrow the time interval





The flame diagram is simple to understand. The X-axis represents time, the Y-axis represents the function called, and the function contains the function called in sequence. The Y-axis occupies only one time dimension of the X-axis

Step 3: Identify the problem, red triangle



The problematic part






Step 4: Trace the problem and locate the code

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


Step 5: Further analyze the problem location






There are smaller ones on the purple bar













Forced backflow can be a performance bottleneck










To avoid the occurrence of this kind of situation, can reference developers.google.com/web/fundame…

Step 6: Compare the optimization results








Step 7: Store knowledge for performance optimization

Rail model is used to measure the performance developers.google.com/web/fundame… Basic reserves:

  • Rendering performance overview developers.google.com/web/fundame…

  • The anatomy of A Frame aerotwist.com/blog/the-an…