preface

DevTools[1] DevTools[1] DevTools[1] DevTools[1] DevTools[1

Original text: developers.google.com/web/tools/c… By Kayce Basques

Note: Please do not reprint without permission

The body of the

“Note: It can be viewedOptimize website speedTo learn how to make your pages load faster.“

Runtime Performance is the performance of the page when it is running (not loading). This tutorial will teach you how to analyze runtime performance using the Performance TAB of Chrome DevTools. In terms of RAIL(Response, Animation, Idle, Load) models, the skills you learn in this tutorial are useful for analyzing the response, animation, and idle phases of a page.

Warning: this tutorial is based on Chrome59. If you are using other versions of Chrome, the UI and functionality of DevTools may be different. Check chrome: // help to see the version of Chrome you are running.

Start this tutorial

In this tutorial, you open “DevTools” on the page and use the “Performance” TAB to find Performance bottlenecks on the page

  1. Open Google Chrome in Incognito mode. Incognito mode puts Chrome into a pure state. For example, if you install a lot of browser extensions, they may interfere with the performance evaluation and not get accurate data.
  2. Open the following page in the Invisible window. This is the demo page for the tutorial. The page shows a bunch of little blue squares moving up and down; Googlechrome. Making. IO/devtools – sa…
  3. Use shortcut keys“Command+Option+I“(Mac) or“Control+Shift+I“Open (Windows, Linux)DevToolsThe effect is shown in the following image: ˆ “Figure 1“The page is on the left and DevTools is on the right
Note: for subsequent screenshots, ‘DevTools’ will appear as a separate window so you can see the content better

Analog mobile CPU

Compared to desktop computers and laptops, the CPU performance of mobile devices is much lower. So when you analyze pages, you typically use CPU limits to simulate how pages behave on mobile devices;

  1. In Devtools, click the Performance TAB;
  2. Be sure to enable the “Screenshots” check box;
  3. Click on the“Capture Setting“.“DevTools“The Settings that are relevant to the performance analysis environment are expanded.
  4. for“CPU“Option, choice“2x slowdown“. DevTools will limit your CPU to twice as slow as normal “Figure 2“CPU throttling Settings, in the blue box
Note: When testing other pages, set the CPU limit to 20x slower if you want to make sure they work on low-end mobile devices. This demonstration does not work well with a 20x deceleration, so only a 2x deceleration will be used for educational purposes.


The CPU performance of mobile phones is now much better than before, and chrome can only be set to 4x\6x

Presentation Settings

It is difficult to create an operational performance demo page that is consistent for all users [2]. Next you’ll need to customize the demo to ensure that, under your conditions, your experience is relatively consistent with the screenshots and instructions seen in this tutorial;

  1. Click the “Add 10” button to see that the blue block moves significantly slower than it did initially. On a good computer, it might take about 20 clicks

  2. Click the Optimize button and the blue box moves faster and more smoothly

Note: If you don’t see a significant difference between the optimized and non-optimized versions, try clicking the “Subtract 10” button a few times and retry the above step. If you add too many blue squares, you will only maximize the CPU and not see a significant difference between the two versions.
  1. Click the “UN-optimize” button. The blue blocks move slower and the page gets stuck

Record running performance

When you run an optimized version of the page, the blue squares move faster. Why is that? Both versions should move each square the same space in the same amount of time. Record in the Performance TAB to see how to detect performance bottlenecks in non-optimized versions.

  1. In DevTools, click Record. “DevTools” captures performance metrics at runtime for the page.

“Figure 3“: Page analysis

  1. Wait a few seconds.
  2. Click the “Stop” button,“DevTools“Stop recording, process the data, and then“performance“TAB to display the final results “Figure 4.“: Analysis results

Wow, that’s a lot of data. But don’t worry, you’ll find out what these numbers mean next;

Results analysis

Once you’ve logged the performance of your page, you can measure how bad your page’s performance is and find out why.

Analysis of Frames Per Second

The main measure of animation performance is frames per second (FPS). When the animation runs at 60 FPS, it looks smooth to the user [3].

  1. To view“FPS“Table, if you see a red bar above the icon, it means that the page frame is very low, which will affect the user experience. “Figure 5“: The blue box identifies the FPS chart

  2. Below the FPS chart, you’ll see the CPU icon. The colors in the CPU chart and“Performance“TAB at the bottom“Summary“The colors of the tabs correspond. In the CPU diagram, the higher the color filling height, the more CPU resources are used. When you see your CPU running at full capacity for an extended period of time, you need to find ways to reduce CPU usage. ˆ

Figure 6: The blue box identifies the CPU icon and the Summary TAB

  1. Hover over the FPS, CPU, or NET chart.“DevTools“A screenshot of the page at that point in time is displayed. Move the mouse left and right to display the record. This is called scrubbing and is useful for manually analyzing the playback of animations. “Figure 7.“: view the screen capture of the page at about 2000ms in the record

  2. In the Frames section, hover over a green square and DevTools will show you the FPS for a particular frame, which may fall well short of the 60 FPS target;


“Figure 8” : Hover over a frame

In this demo, it was obvious that the page wasn’t working well. However, in the actual situation, it may not be obvious, so using these tools can be very convenient for detection.

Bonus: Turn on FPS meter

Another handy tool is the FPS meter, which provides real-time estimates of the FPS while the page is running.

  1. Press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux) to open the Command menu.
  2. Enter “Rendering” in the input field and select “Show Rendering”.
  3. in“Rendering“TAB, select“FPS Meter“, a new hover layer will appear in the upper right corner of the view (MAC is the upper left corner).

“Figure 9” : FPS panel

  1. Unplug the FPS Meter and press ESC to close the “Rendering” TAB. You will not use this panel in this tutorial.

Looking for bottlenecks

Now that you’ve measured and verified that animation doesn’t work well, the next question to answer is: Why?

  1. Note the summary TAB. If no events are selected, this TAB displays the classification of activities. The page spent most of its time rendering. Since improving performance is the art of reducing browser workload, your goal is to reduce the amount of time you spend doing rendering work.

“Figure 10.“: The blue box is“Summary“TAB

  1. Expand the Main section.“DevTools“Shows you the activity chart of the main thread over time. The X-axis represents records over time. Each bar represents an event. A wide bar indicates that the event took longer. The Y-axis represents the call stack. When you see events stacked on top of each other, it means that the higher event calls the lower event.

“Figure 11” : The blue box is the “Main” block

  1. There’s a lot of data in the record. Zoom in on an individual by clicking, holding, and dragging the mouse over Overview“Animation Frame Fired“The overview is a section that includes FPS, CPU and NET charts. The “Main” block and the “Summary” TAB only display information for the selected portion of the record. “Figure 12“: Zoom in singleAnimation Frame FiredThe event
Note: Another zoom method is to focus the observation by clicking on the background of the “Main” block or selecting an event, and then pressing the W, A, S and D keys.
  1. Notice the red triangle in the upper right corner of the “Animation Frame Fired” event. But when you see a red triangle, that’s a problem.
Note: When the requestAnimationFrame() callback is executed, the “AnimationFrame Fired” event is Fired
  1. Click on theAnimation Frame FiredThe event,“Summary“TAB displays information about the event. Pay attention torevealLink, click the link,“DevTools“The startup is highlightedAnimation Frame FiredEvent of event. Also be aware thatapp.js:94Link, which jumps to the relevant line in the source code.

“Figure 12” : More on the Animation Frame Fired event

Note: After selecting an event, you can use arrow keys to select the event next to the event

  1. Below the app.update event, there are a bunch of purple events. If you stretch it out, you’ll see that almost every purple event has a red triangle. Now click on one of the purple Layout events. Looking at the information provided by the Summary TAB in DevTools, you can see that there is indeed a warning for forced reflows (that is, forced layout)

  2. in“Summary“TAB, and clickLayout ForcedUnder theapp.js:70Links,“DevTools“Switches to the line of code that triggers the forced layout

Figure 13: Line of code that triggers the forced layout

Note: The problem with this code is that on every animation frame, it modifies the square style and then queries the position of each square on the page. Since the style has been modified, the browser does not know if the square’s position has changed, so it needs to be rearranged to calculate its position. Use transform and opacity changes for animations ] (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance) to learn more knowledge

Well done, so it took a while, but now you have a solid foundation for analyzing performance.

Bonus: Analyze optimized versions

Click the Optimize button on the demo page to launch the version of the optimized code, log the performance using the processes and tools you just learned, and then analyze the results. From the improved frame rate to the reduction of events in the “Main” block flame chart, you can see that the optimized version of the app does less work for better performance;

Note: This “optimized” version is not the best either, as it still operates on the top property for each square. A better approach is to manipulate only the properties that affect composition. For more information, see Use Transform and opacity changes for animations

The next step

The RAIL model is fundamental to understanding performance. The model tells you which performance metrics are most important to the user. For more information, see Measure Performance with the RAIL Model

More practice will help you become more familiar with the “Performance” TAB. Try to analyze your own pages and analyze the results. If you have any questions about your results, post a question on Stack Overflow labeled Google-Chrome-DevTools. If you can, please include screenshots or links to replicable pages

To really grasp runtime performance, you have to learn how the browser converts HTML, CSS, and JS into pixels on the screen. You can start with Rendering Performance Overview. The Anatomy Of A Frame goes into more detail.

Finally, there are many ways to improve runtime performance. This tutorial focuses on a specific animation bottleneck so you can focus on the “Performance” panel, but this is just one of many bottlenecks you may encounter. The rest of the Rendering Performance series provides many good tips for improving various aspects of runtime performance, such as:

  • Optimizing JS Execution
  • Reduce The Scope And Complexity Of Style Calculations
  • Avoid Large, Complex Layouts And Layout Thrashing
  • Simplify Paint Complexity And Reduce Paint Areas
  • Stick To Compositor-Only Properties And Manage Layer Count
  • Debounce Your Input Handlers

Reference

[1]

What Devtools is: A developer tool for Chrome that consists of several tabbed tools.


[2]

Could not get a consistent performance demo because the user’s device configuration was different from the Performance option version.


[3]

Why 60 FPS: Related to human eye recognition

This article is formatted using MDNICE