This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021.

preface

Chrome DevTools is a developer tool provided by Chrome browser. It can help developers analyze page performance, network request analysis, etc. It can help us find performance bottlenecks, so as to develop optimization strategies.

Next we’ll take a look at the Performance and Network panels of Chrome DevTools.

Performance

Before performing page analysis using Performance, you need to set the browser to the traceless mode. The traceless mode ensures that Chrome runs in a relatively clean environment and prevents interference caused by browser plug-ins. Open traceless mode in the top right corner of Chrome:

Use the shortcut keys Command+Opiton+I (Window system Control+ Shift +I) to open Chrome DevTools, select the Performance panel, and generate a Performance analysis report as prompted.

The generated analysis report contains many indicators related to page performance, which can be divided into overview area, resource consumption details area and statistical summary area.

An overview of regional

The horizontal coordinate of the overview area is time, and the top down is FPS, CPU, NET and screen shot respectively:

  • FPS: Frame rate, number of render frames per second, red means frame rate is too low, green means normal.This metric is usually used when analyzing the animation performance of a page.FPSThe best place to stay is around 60,FPSIf it is too low, the page will have obvious lag.
  • CPUSaid:CPUTime consuming. The color in the area represents various events.
  • NET: The blue area indicates that there are network requests during this period.
  • Screen shot: A screenshot taken at a point in time.

Resource consumption details area

Resource Consumption details area contains statistical details of major resources. The horizontal axis is the timeline.

Frames

Indicates the time consumed in drawing each frame. Move the mouse to this area to view the time and FPS of each frame.

Timing

We know that during page rendering, we generally go through the following steps:

  1. HTMLParsing generatedDOMThe tree.
  2. Generate or update in conjunction with computed style rulesrenderThe tree.
  3. Layer: According to certain rules will beDOMSubtree partition into layers, generated or updatedlayerThe tree.
  4. Paint: Draw layers and output a list of drawing instructions.
  5. Rasterization: Rasterization, filling the layer area with pixel values.
  6. Composition: Combine layers according to the rules.

Note in Timings some key points in time that can assist in analyzing page performance:

  • DCL:DOMContentLoaded EventTrigger point in time, representing the pageDOMTree parsing is complete.
  • L:onloadEvent trigger time, indicating that the page is loaded, including images.
  • FP:First Paint, the time when the page is drawn for the first time, that is, the page produces pixel changes for the first time, such as setting the page background color, which will be triggered when the background color is drawn.
  • FCP:First Contentful Paint, rendering of the first valid content of the page, including text, images,canvasandsvg.FCP 和 FPSometimes it might be equal.
  • LCP:Largest Contentful Paint, the drawing time point of the maximum effective content, indicating that the content occupying the largest visible area of the page has been drawn. In the era of single page,FP 和 FCPGradually losing its measure of significance,LCPBecome a more accurate measure of the speed of page rendering important indicators.

Main

The contents of the field represent the call stack of the task from top to bottom. Different colors indicate the execution of different types of events. There are three main colors to pay attention to:

color The event
yellow jsScript execution
purple Render related events (including style calculations, updateslayerTrees, updaterenderTree)
green Paint related events

If the task has a red triangle, it indicates that the task has an exception. Click this event to view the details in the Summary area:

Raster

Logs the running time of the Rasterizer thread that handles Rasterizer paint-related tasks.

GPU

Indicates the running time of the GPU. The GPU has high parallel computing capability and can “speed up” page processing. For example, the composite layer is usually processed by the GPU.

Compositer

Logs the runtime of the Compositer thread, which is responsible for:

  1. The content is uploaded to the GPU during page rendering to inform the GPU to draw to the screen.
  2. Page scrolling deals with the visible and soon-to-see areas.
  3. To deal withCSSThe animation.

When there are no CSS animations on the page, this thread is used for very little time.

Statistical summary area

  • Summary: Statistics the time occupied by each event in a pie chart.
  • Bottom-up, Call Tree, and Event Log: These three panels allow you to view the time information, Call order, and Log for each Event.

Network

Network resource request is an important component of a website. As another important panel of DevTools, Network can help us analyze page performance from the perspective of Network resource request.

From the panel we can detail the information for each request:

  • The Name of the request. Click Name to view the specific request information and response information.

  • Request status: If the request status is abnormal (4XX or 5XX), it indicates that the resource load is abnormal, which may affect the page rendering.

  • Type of the resource.

  • The object that sends the request (Initiator).

  • Size of the resource: If the resource is fetched directly from the cache, you can also see which type of cache the resource is fetched from (memory cache and disk cache).

  • Time: The elapsed time from the start of the connection to the completion of the final content download.

  • Waterfall: The time line of this request can be seen by moving the mouse over it.