Chrome developer tools in a detailed (3): Timeline panel

Timeline Panel

The timeline panel is the most complex panel in the entire panel, involving more than one thing. You can use this panel to record and analyze all activity behavior information during the Web page run. You can take advantage of this panel to analyze your Web page's program performance issues.

Overview

is to introduce the timeline panel from Google's official website, which consists of 4 large panes (Pane):

1. controls Record the switch and what information needs to be recorded during the recording process.

2. Overview Overview of Web page performance.

3. Flame Chart A visual diagram of the CPU stack track (flame diagram). There are 1 to 3 imaginary vertical lines in the chart.

4. details When a specified event is selected, more information about the event is displayed, and the specified timeframe information is displayed when no event is selected.

Flame The imaginary vertical line inside the Chart means: the Blue flag domcontentloaded event; the Green mark is the first time point of the drawing; red represents the Load event.

The 2nd block, Overview , shows the profile of the Web page performance, which can be dragged out of a specified area by a gray slider on the mouse or area boundary, and theFlame Chart will then display the detail information in the specified area with a local zoom.

You can zoom in and out of a specified area by using the keyboard to W S A D Move the specified area to the left or right.

From Google to the map here, this pane contains three charts:

1. fps frames per second (Frames per Second). The higher the green bar, the higher the number of frames per second. The red block above the FPS chart is marked with a long frame.

2. CPU Tagged CPU resource usage, where the area icons remember various events that consume CPU resources.

3. NET A variety of color bars display a resource respectively. The longer the bar, the longer it takes to get the resource.

The meaning of each color in the CPU area chart: Blue for HTML file; Yellow for script file; purple for style file; Green represents the media file; Grey represents other miscellaneous documents.

NET Chart bars two colors meaning: The lighter part represents the wait Time (when a resource is requested, until the first byte is downloaded); The darker part represents Transfer time (the time between the first and last bytes being downloaded).

Page Recording Details

supports two types of Web page recording operations: ① recording Web page loading , ② recording web interaction . For the sake of analysis, the recording time should not be too long, but also to avoid unnecessary interaction, and disable the browser's cache and plug-ins.

When the recording is complete, click on the left triangle in the Flame chart(Flame chart) to expand the details, click on the event or the space in the details to view the event or the general summary information. There is a lot of information about the bread, which is limited to the reason of the space, the next time you have the opportunity to further introduction, or directly to Google to view the timeline Event reference this reference document.

JS Analysis in a recording

Clicking on the JS profile check box in Controls before recording allows you to capture the stack information of JavaScript in the timeline (which results in a certain performance drain), and in the Flame Chart( All called JavaScript function information is displayed in the fire diagram.

Capturing screenshots in a recording

Click the screenshots check box in Controls before recording to capture a screenshot during recording, and the mouse to move from left to right on the overview to see the recorded animation.

Drawing parsing

Click the paint check box in Controls before recording to get more details about the drawing event (note that this can result in a lot of performance consumption). If you want to learn more about Web page rendering, you can click on the menu in the top right corner of Devtools and select Rendering settingsin more tools , which contains the following settings:

• Paint Flashing highlights the part of the page that needs to be redrawn.

• Layer Borders displays the layer boundary.

• fps Meter frame details per second, frame rate distribution information, and GPU memory usage.

• Scrolling Performance Issues analyzes performance issues when scrolling, and displays areas that slow down the screen.

• emulate CSS media emulation CSS medium type, view different device CSS style effect, possible media type options are print , screen .

Check all of the above settings, and the page is displayed as follows:

Querying for specified events

You can view events of a specified Cmd+F(Mac) type within a specified time zone by pressing the Bring up query box on Devtools, or you Cmd+G(Mac) Cmd+Shift+G(Mac) can query by the order in which the events occurred.

There are 4 red flagged events in the graph Parse HTML , and clicking on the Cmd+G focus will move through the 4 events.

Run-time performance analysis

The above describes the various functions on the Timeline Panel menu, then how to use the panel to analyze and optimize the performance of the Web program, because of the space constraints, it is not here to discuss, interested readers directly to the Google developer document to view, The Google developer documentation has the most authoritative and up-to-date information.

Bole Online column Author-charliechu

Original address: Https://mp.weixin.qq.com/s/TTHWlgYoYGONBykPWZUt_g

Chrome developer tools in a detailed (3): Timeline panel