Chrome Performance Page Performance analysis guide

1. The background

Performance optimization is a very important part of front-end development, how to better network delivery, how to optimize the browser rendering process, to locate problems in the project. Chrome DevTools gives us two common ways to Audits and Performance, which allows you to grade pages for Performance and give you optimization suggestions. Performance, on the other hand, provides a lot of runtime data that allows us to see more detail. How to use Performance in DevTools for Performance analysis

2. The Performance is introduced

First, open the web page in the new non-trace window. Open Chrome DevTools and switch to Performance to see the following screen

The buttons in areas 1 and 3 in figure 1 are used to record performance data. The black button is used to record performance data in the interaction phase, and the circular arrow button is used to record performance data in the loading phase. Figure 2 shows the area where you can set the network load speed and CPU speed for the current page.

Next click the black button to generate a performance report for the interaction phase

Part ONE: Overview

Here is the main interface of whole rendering, each time period to perform the sequence of events, from above we can know that we each time period (down to ms) did that, when the mouse on it, we also can be in the form of a larger version to check our rendering situation of interface of each time period, the Performance will be a few key indicators, Things like page frame rate (FPS), CPU consumption, network request traffic, V8 memory usage (heap memory), etc., are plotted in chronological order.

Part TWO: Performance panel

The performance panel mainly includes the following parts: 1.Net Work. Here, we can intuitively see the order and duration of resource loading. 3.Timings are used to record the data information generated by some key time nodes, such as FP, FCP, LCP, etc. 4.Main is an important part of the Performance tool, which records the execution of the Main thread in the rendering process. Click on Main to see how a task is performed. The positor composition thread is used to record the layer composition after the HTML Paint phase. 7.GPU Record the execution process of the main thread of the GPU process. For example, you can intuitively see when the GPU acceleration is started… The Memory option, when checked, displays the line chart that shows how we performed over different time periods. When we look at the memory usage of the page, such as the JS Heap, if the curve keeps growing, it indicates a memory leak. If the memory curve stays unchanged for a long period of time, there is a possibility of a memory leak. By analyzing the various parts of the performance panel and locating problems, you can gain a better understanding of how the browser works

Part 3: Summary

This is a measure of what was done during the time range for our Scripting, which is Loading and Rendering, Painting and Other times, and Idle

3. The Performance practice

The following is an example to illustrate the use of the performance panel, in the non-trace window click automatic restart page, and record the entire page loading process, and then to analyze the results ~

Network && white screen

The performance panel, which has many, many parameters, we’re going to look at some of the more common ones. First look at the white screen time and the network load, as shown below

Above, we can see several information: The white during the time of the page load is about 150 ms load resources from the network, image is not enabled http2, so every time the number of images can be loaded at the same time is limited, has not been loaded pictures are waiting for loading time can also see process resources In addition, we can have a look at the resource loading have a blank period, although the above no. However, if there is a gap between resource loads, you are not taking full advantage of the idle time of resource loads, and you can adjust it.

Flame figure

The flame diagram, mainly in the Main panel, is the most commonly used panel to analyze the time of specific functions. Let’s take a look at the following figure:

First of all, there will be a lot of tasks in the panel. If a Task takes a long time, its upper right corner will be marked with red. At this time, we can select the red Task and then zoom in to see its specific time consuming point. If YOU zoom in, you can see what’s going on, what’s going on, and you can see what’s going on, and you can see what’s going on, and you can see what’s being compressed, and you can see what’s being compressed. Then we click on a function, and at the bottom of the panel, there’s information about the code, which function it is, how long it takes, what line on what file, and so on. In this way, we can easily locate the time function. At the same time, we can also check the Main index to analyze whether there are operations such as forced synchronous layout in the code. After analyzing these reasons, we can optimize our program targeted

Timeline && Memory situation

In the Timings area, we can see some key times for this load, which are:

FCP: First Contentful Paint LCP: Largest Contentful Paint FMP: First Meaningful Paint DCL: DOMContentLoaded Event L: Onload Event we can select (select the area from white screen to content, which represents the page loading process), you can see the above time, as shown in the screenshot below:

In addition, we can look at the memory usage of the page, such as the JS Heap, and if the curve keeps growing, there is a memory leak. If Nodes and Listeners are added continuously, it is possible to add Nodes or events repeatedly.

The bottom is time-consuming profile of a whole page, if Scripting time is too long, then js execution logic is too much, can consider to optimize the js, if the rendering time is too long, consider optimizing rendering process, if too much free time, can consider to make full use of it, such as the free time to elevate the some operations on the page report, etc.

4. The last

You can try the use of performance, through performance can more intuitive understanding of the browser rendering principle and workflow, but also can be the browser system architecture, message loop mechanism, rendering pipeline and other front-end concepts together, deepen understanding.