The original link: developers.google.com/web/tools/c… If you want to learn how to use Chrome Performance to analyze page Performance, and you don’t have access to Google, maybe this article will help you. This article will teach you how to use the Performance panel to analyze browser runtime Performance. Github address: github.com/hewq/blog/b… Related articles: github.com/hewq/blog/b…

start

In this tutorial, you’ll use the Performance panel in Chrome’s Developer tools to find page Performance bottlenecks.

  1. Open Chrome’s Traceless mode. Traceless mode ensures that the browser runs in an environment free of other distractions. For example, if you have a lot of plug-ins installed in Chrome, they might interfere with your performance evaluation.
  2. In non-trace window open hewq. Making. IO/apps/a20201… This is a performance analysis Demo.
  3. Press theCommand+Option+I(Mac) orControl+Shift+I(Windows, Linux) Open developer tools.

Analog mobile CPU

The CPU performance of a mobile phone is worse than that of a PC, so you can simulate the performance of a page on a mobile phone by limiting the CPU when analyzing it.

  1. In developer Tools, click Performance.
  2. Check the Screenshots check box.
  3. Click Capture Settings on the right

, you will see Settings for performance metrics. 4. Under CPU Slowdowns, select 2X Slowdowns (newer versions of Chrome may only have 4X Slowdowns and 6X Slowdowns). Limit the CPU to be 2 times slower than normal.

Set up the Demo

It’s not easy to get the same performance demo for all users when you open the page, so you can manually set whatever Settings you use to make sure your experience is similar to the screenshots and instructions you’ll see in this tutorial.

  1. Keep clicking Add 10 until the blue block moves significantly slower.
  2. Click Optimize and the blue box moves faster and smoother.
  3. Click un-optimize and the blue block will slow down again.

Record runtime performance

Blue blocks move faster when you Optimize than when un-optimize is not on. Why is that? Both versions move the cube to the same position in the same amount of time. Log in Performance to see how to detect Performance bottlenecks for non-optimized versions.

  1. Click on theRecord

. Developer tools will record performance metrics as the page runs.

  1. Wait a few seconds.
  2. Click on theStop. The developer tool stops recording, processes the data, and displays the results.

Don’t worry if you’re looking at a lot of data and you don’t know what to do with it, you’ll learn how to analyze it.

Results analysis

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

Analysis of frames per Second

The main measure of animation is frames per second. When the animation runs at 60 FPS, it feels smooth to the user.

  1. View the FPS chart. When you see a red bar above an FPS, it means that the frame rate has dropped very low and can affect the user experience. In general, the higher the green bar, the higher the FPS.

  2. Below the FPS chart is a CPU chart. The colors in the CPU chart correspond to the colors in the Summary below. The CPU chart is full of color, which means that CPU usage has reached its maximum during the recording process. When you see the CPU at full capacity for an extended period of time, you should look for ways to reduce CPU usage.

  3. The mouse on theFPS,CPUorNETOn the diagram, developer tools will display a screenshot of the page at that point in time. Move the mouse from left to right to re-see how the page rendered during recording. This is useful for manually analyzing the progress of the animation.

  4. inFramesPlace your mouse over any green square and you will see the FPS of the specified frame. Each frame can be well below 60 FPS.

Of course, in this Demo, it was obvious that the page wasn’t performing well. But in the real world, it may not be that easy to tell, so it’s very convenient to have these tools for measurement.

Open the FPS monitor

Another handy tool is the FPS display, which displays real-time FPS data while the page is running.

  1. Press theCommand+Shift+P(Mac) orControl+Shift+P(Windows, Linux) Open the command menu.
  2. Enter in the command menuRendering, the choice ofShow Rendering.
  3. inRenderingUnder the options option, selectFPS Meter(or Frame Rendering Stats), real-time FPS Rendering Stats will be displayed.

Finding performance bottlenecks

Now that you’ve measured and verified poor animation, the next question to answer is: Why?

  1. Note the Summary option, which shows a breakdown of activities if no events are selected. The page spends most of its rendering time, and since performance is an art of reducing the amount of work, your goal is to reduce the amount of time the page takes to render
  2. Expand the Main section. You will see a flame diagram of the main thread over time. The X-axis represents records that change over time, each representing an event, and the longer the width, the more time it takes. The Y-axis represents the call stack. When you see events stacked on top of each other, it means that the event above triggered the event below.
  3. By clicking, inAn overview of the(includeFPS,CPU 和 NETThat part of the chart) hold and drag the mouse to zoom in on a singleAnimation Frame FiredEvents.Main 和 SummarySection displays information for only the selected section.

*Another way to zoom is to focus the main section by clicking on the background of the main section or selecting an event, and then pressing the W, A, S and D keys.4. Pay attention toAnimation Frame FiredThe triangle in the upper right, this is a warning that whenever you see this triangle, there may be a problem associated with this event. *The AnimationFrame Fired event is Fired every time the requestAnimationFrame () callback is executed.5. Click on theAnimation Frame FiredThe event,SummaryInformation related to the event will be displayed. Pay attention torevealClick the link to see the triggerAnimation Frame FiredIn the event. At the same timeapp.js:94(app.js:81) this link will jump to the relevant line in the source code.

*After selecting the event, use the arrow keys to select the event next to it.In 6.app.updateBelow, there’s a bunch of purple events, and if they’re wide enough, it looks like each one has a red triangle on it. Click on the purpleLayoutThe event,SummaryMore information about the event is displayed in. Actually, a warning about forced backflow (layout). In 7.SummaryClick on theLayout ForcedUnder theapp.js:70(app.js:57) locate the code that forces backflow.

* 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 if the position of each square has changed, so the square must be rearranged to calculate its position.

There’s a lot to know, but now you have the foundation of a basic flow for analyzing runtime performance. Come on!

Analysis optimized version

Using the tools and processes you just learned, click Optimize on the page to enable the optimized code, get another performance record, and then analyze the results. From the increased frame rate to the reduction of events in the Main flame chart, you can see that the optimized page works much less, resulting in improved performance.

* Even this “optimized” version is not that good, as it still manipulates the top property for each square. A better approach is to use properties that only affect the composition layer.