Chrome Developer tools:timeline Panel Description

The Timeline toolbar provides a detailed overview of how the Web app spends time during the loading process. These applications include downloading resources, handling DOM events , page layout rendering , or drawing elements to the screen.

For example, the timeline panel is divided into four modules- control Module, overview module, Flame diagram module, detail module.

• Control module controls: Control start record, stop recording, configure a record to crawl information type, including: JS overview, Memory, redraw,.
• Overview Module Overview: A high-level summary of page performance.
• The Flame Diagram module Flame A visual description of the CHART:CPU stack. You can see three vertical dashed lines, the Blue Line represents the DOM generation, corresponds to domcontentloaded event, the Green Line represents the time of the first draw, red represents the load complete, corresponding to the Load event.
• Detail module Details: When an event is selected, the panel displays more information about the event. If no event is selected, the information for the selected flame chart is displayed.

Ii. Overview Module

The overview module is a high-level summary of the performance of a page, including 3 sections of-fps,cpu,net.

1, FPS (Frames Per Second)

Web page animation can be 60 frames per second, will be synchronized with the monitor refresh, 60 times in a second to re-render, so to control the time of each render can not exceed 16.66ms.

FPS represents the number of frames per second. The higher the green bars, the higher the FPS.

Green blocks above the red block indicates a long flame, that is, each frame of the event is too long, it is possible that the lag (animation rendering time more than the screen refresh time) produced. be particularly concerned.

2. CPU

CPU resources.

This area chart indicates which event consumes CPU resources.

3, NET

Each color block represents a resource, and the longer the block length, the longer it takes to get the resource.

The lighter color portion of each block represents the wait time to get this resource (from the time the request is sent to the first byte received).

The darker part represents the download time of the resource (the first byte receives the last byte received).

The color of the column corresponds to the following: "and the color in the detail module is uniform"

• Blue (Loading): Network communication and HTML parsing, corresponding HTML file
• Yellow (Scripting): JavaScript execution, corresponding JS script file
• Purple (Rendering): Style calculation and layout, that is, reflow, corresponding to stylesheets file
• Green (Painting): Media file

• Gray (Other): Time spent by other assorted resources
• White (idle): Idle time

Third, how to get a record

By default, the timeline panel does not display any data, so how do I get a record?

1, record the loading process of a page

Open the page you want to record, open the Timeline panel, refresh the page, and the timeline panel automatically records the page reload (if not, you can manually ctrl+e start).

2. Record page interaction

The upper-left gray dots, which are recording buttons, turn red when clicked, and then press turn gray to finish recording after the page has been related.

So the Record page interactive steps for, open the Timeline panel, click the Record button, the button at the beginning of the recording time-varying red, then perform the page interaction, and then stop recording.

Note When recording interactions:

• Recording time is as short as possible-the shorter the time the better the problem.
• Avoid unnecessary actions (what is not necessary?) such as mouse clicks, network loading, etc. For example, to record the click on the Login button event, do not simultaneously trigger the scrolling mouse, loading pictures of these additional events)
• Disable browser caching
• Prohibit plug-in extension (avoid unnecessary interference)

A record is completed by 1 and 2, and then the timeline will begin to display the performance parameters during the analysis operation.

Iv. View record details 1, details of the recording module

Viewing the details of a record is done through the details module. In the fire diagram module, click to select an event, and the details of the event will be shown in the details module.

Different colors in summary represent different content.

• Blue (Loading): Network communication and HTML parsing
• Yellow (Scripting): JavaScript execution
• Purple (Rendering): Style calculation and layout, that is, reflow
• Green (Painting): Redraw
• Gray (Other): Time spent by other events
• White (idle): Idle time

The details module has 4 panels, each event will have a summary panel, and the other three will only be for a specific event.

2. Blocks that may have performance issues

In timeline, the browser will Mark Some of the processes that may cause performance problems during the detection process, and in the overview area, there may be some red chunk segments that indicate that the events performed at the corresponding time may have performance issues while the Flame diagram module , a red triangle appears in the upper-right corner of the event block, click on the current chunk, and a detailed warning is given in the "Summary" summary area below, such as the browser tip "forced reflow may be a performance bottleneck."

‘’

V. Capturing the screen when capturing records

The timeline panel captures the screen when the page loads, which is called Filmstrip (slide).

How to get it?

Be sure to select the "screenshots" check box before recording, and the screen will be saved in the overview module.

After the record is complete, hover the mouse on the top or the overview module, you can see a scaled screen, the mouse movement around can simulate a rendered animation.

Vi. Overview of JavaScript

Be sure to select the "JSprofile" check box before timeline get the JS analysis record, and the Fire Diagram module will show each JavaScript function that is called after the record is finished.

Vii. Overview of Painting

For timeline to get more drawing information, be sure to check the "Paint" checkbox before recording. When selected and clicked to trigger a paint event, the detail module will have a more "paint profile" panel to display more relevant information.

Rendering settings

Some of the configurations available in the more Tools>rendering setting settings rendering are useful when debugging some rendering problems. After opening, after the Console Console tab, one more Rendering tab.

Press ESC to show or hide the console/rendering panel. Hidden by default.

Eight, find records

If you just want to focus on some type of event, like just looking at HTML rendering. You can find the records.

Ctrl+f shortcut key to call out the search bar, enter the HTML.

Nine, a part of the amplification timeline

When analyzing timeline, if you are interested only in certain operations within a certain time period, you can select the area you want to browse by dragging the slider of the timeline with the mouse, or zoom in and out of the selection by scrolling the mouse, and the Flame diagram module will automatically follow.

Ten, save and load recording

In the profile module or the Flame diagram module, you can right-click to see two options:Save Timeline data and Load Timeline data.

The saved data format is in JSON format.

Chrome Developer tools:timeline Panel Description