Detailed introduction of Chrome developer tools-timeline

1. Overview

Users expect the web applications they access to be interactive and run smoothly. Therefore, as a web developer, you should also spend more time in this regard. The pages we make should not only load quickly, but also run smoothly: the scrolling of the page should respond quickly to the movements of the finger, and the animation and interactive effects should be as smooth as silk.

In this way, if you want to write high-performance web sites, you need to fully understand how browsers process HTML/JS/CSS to ensure that the code is efficient.

2. The necessity of FPS and performance optimization

FPS is the refresh rate per second. Currently, the screen refresh rate of most devices is 60 times per second. If there is an animation or gradient effect in the page, or the user is sliding the page, the browser must render each frame of the animation or page within 16 milliseconds (1 second / 60 = 16.66 milliseconds).

1. Page rendering process

But in fact, while rendering a frame, the browser has some extra work to do (such as managing the rendering queue, switching between the rendering thread and other threads, etc.). Therefore, simple rendering work generally needs to be completed within 10 milliseconds to achieve a smooth visual effect. If this time limit is exceeded, the rendering of the page will become stuck, commonly known as jank, which is a very bad user experience.

The conversion of a page into pixels on the screen generally goes through the following five stages:

From left to right, they are JS, style, layout, drawing, and rendering layer merging.

a. Drawing: It is essentially the process of filling pixels. The first step is to create a series of draw calls; the second step is to fill in the pixels, also known as rasterization.

b Rendering layer merging: The browser will merge all layers into one layer in a reasonable order and then display it on the screen.

3. Methods for performance optimization and improvement

1. Optimize the execution efficiency of JavaScript

1.1 For animation effects, avoid using setTimeout or setInterval, use requestAnimationFrame instead

/**

function updateScreen(time) {

  // Make visual updates here.

}

requestAnimationFrame(updateScreen);

1.2 Put the time-consuming JavaScript code into Web Workers

1.3 Divide the update of DOM elements into multiple small tasks and complete them in multiple frames

1.4 Use Chrome DevTools’ Timeline and JavaScript Profiler to analyze JavaScript performance

2. Reduce the scope and complexity of style calculations

In the worst case, the amount of style calculation = number of elements x number of style selectors. Because all styles need to be checked at least once for each element to confirm whether they match.

2.1 Reduce the complexity of style selectors; use class-based approaches, such as BEM

2.2 Reduce the number of elements that need to perform style calculations

2.3 Using DevTools, select the Timeline tab and click the red record button in the upper left corner

3. Avoid large-scale and complex layouts

Layout is the process by which the browser calculates the geometry of DOM elements: their size and position within the page. The time consumption of layout mainly lies in: the number of DOM elements that need to be laid out; the complexity of the layout process.

3.1 Triggering layout should be avoided as much as possible: Modifications to the geometric properties of DOM elements require re-layout

4. Simplify the complexity of drawing and reduce the drawing area

5. Give priority to using render layer merging properties and controlling the number of layers

6. Processing of user input time

4. Chrome console tool

The console, also known as the developer tool, is a debugging tool that comes with the browser. The current mainstream consoles are: Firebug for Firefox, Chrome development tools, and debugging tools for Safari.

Use the Chrome browser to open any web page and press F12 or right-click and select "Inspect Element" to open the console. This article takes the 500 main station as an example. Click F12 to display the console, as shown below:

There are eight tools to view in total: Elements, Resources, Network, Sources, Timeline, Profile, Audit, and Console. You can use the Ctrl + [ and Ctrl + ] shortcuts to move between panels.

Each Chrome module and its main functions are:

Element: Used to view and edit HTML and CSS elements in the current page.

Network: Used to view detailed information of HTTP requests, such as request headers, response headers, and returned content.

Source: Used to view and debug the source files of scripts loaded by the current page.

TimeLine: Used to view script execution time, page element rendering time and other information.

Profiles: Used to view information such as CPU execution time and memory usage.

Resource: Used to view the resource files requested by the current page, such as HTML, CSS style files, etc.

Audits: used to optimize front-end pages, speed up web page loading, etc.

Console: Used to display debugging information output in the script, or run test scripts, etc.

This article mainly talks about timeline

TimeLine

Every resource written into the page will have its own rendering and painting results, thus presenting a beautiful web page in our eyes. But it also consumes our resources, such as bandwidth, CPU, or time. The cycle is determined when the resource is generated. The main stages of the request declaration cycle are shown in the following figure:

The Timeline can record and run all the activities of the analysis application. To record the page interactions, open the Timeline panel and press the Record button ( ) to start recording, or by typing the keyboard shortcut Cmd + E (Mac) or Ctrl + E (Windows/Linux). The record button will turn from gray to red, and Timeline will start fetching the timeline from your page. After completing some operations in your app and recording some data, click the button again to stop recording.

Please note: Your existing recording session will be cleared so that a new session can be started. Will force V8 to complete a round of garbage collection, which is useful in debugging. The displayed details will be filtered to only show those records that took more than 15ms to complete

First, take a look at the main directory of the timeline:

The red dot next to it is the clear record. The following options can be used to select the items that need to be captured. They are network, JS introduction, screenshot, storage, and description.

There are two display modes: frame mode on the left and event mode on the right. Frame mode can go deep into the internal details of each frame generation. Event patterns provide visibility into the prioritization of cost factors that impact performance.

The following figure is a timeline of opening an optional web page:

The first box is the overview, where you can roughly see the performance of the page.

The second box is event, which is event monitoring. Here's a visualization of the stack trace for the CPU, with green representing media time, red representing load events, and blue representing DOM events.

The third box indicates storage

The fourth box is the details, which will display the detailed information of the event.

In this mode, the Summary view (at the top of the Timeline) displays horizontal bars representing network and HTML parsing (blue), JavaScript (yellow), style recalculation and layout (purple), and painting and compositing (green) events in the page. Repaint is a browser event that is called in response to visual changes such as window resizing or scrolling.

Below the Summary view is the Details view, which contains the details of the records of the relevant categories after a session is recorded.

Each record has a descriptive title on the left and a timeline area on the right. When you move the mouse over a record, more information will be displayed, including the time from the start to the end of the recording.

CPU resources. This area graph indicates the CPU resources consumed by the event type.

When an event is selected in the Flame Table, the Details pane displays more information about the event, as shown in the following figure:

The above figure shows that the loading time is 0.02s, the script time is 15.68s, the rendering time is 11.28s, the drawing time is 46.06s, the other time is 49.06s, and the idle time is 1.27s.

The above picture is the summary table. The figure below is a detailed summary table.

5. Other functions

1. Connect to Android phone to debug code

The phone and computer need to have Chrome browser, and the Android phone needs to be connected to the PC via USB.

1.1 Select Allow USB debugging in the mobile developer tools

1.2 Open chrome://inspect/#devices and select Allow USB debugging

The available Android phones and the pages opened by the Android phones will be detected. You can also enter the URL yourself, as shown in the figure below:

1.3 Click inspect in the picture to enter the debugging state of the mobile page.

In this way, you can operate and debug the mobile page on the computer.

Summarize

The above is the full content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support of 123WORDPRESS.COM.