How to use the Goolge Timeline tool

Online Chinese version of the old, find a new version of the English introduction, Flip, Original: https://developers.google.com/web/tools/chrome-devtools/profile/ Evaluate-performance/timeline-tool?hl=zh

TimeLine Panel Overview

4 Components:

1. Control Panel

Include start record, end record, configure what content I want to capture composition

2. Overview

A high-level summary of page performance, as described below.

3. Flame Diagram

Visual description of CPU stacks

4. Details

When an event is selected, this panel displays more information about the event. If no event is selected, the information for the selected flame chart is displayed.

Overview panel

The panel is comprised of 3 part diagrams:

1.FPS

The Flames per second. The higher the green bars, the higher the FPS. The red chunks on the FPS indicate a long flame, which may be the result of a lag. (Animation rendering time exceeds the screen refresh time)

2.cpu

CPU resources. This area chart indicates which event consumes more CPU resources.

3.net

Each colored column represents a resource. The higher the pillar, the longer it takes to get it. The lighter-colored portion of each bar represents its wait time (the time it takes to send a request to the first bit to download it). The dark part represents its processing time (the first bit receives

Time to the last bit received)

The color of the pillars corresponds to the following:

The HTML file is blue.

The script asks something yellow.

The stylesheets file is purple.

The media file is green.

Other files are grayed out.

How to use the Goolge Timeline tool