preface

Developing at ordinary times, people use more would be Element/Console/Network/Application such as panel, and the Performance panel is less, and when positioning Performance optimization or optimization needs to be familiar with the use and analysis of the properties panel, Today I’m going to share general information about the Performance panel.

This post is posted on my Github

Record page performance

You can also see Google official Demo address is to try

If you select the Developer tools Performance, there are three buttons on the left, one to start recording directly, the second to reload the page and record, and the third to clear.

If you want to go straight to the home page performance review, you can just click the second button.

To avoid browser plugins, you can try any site in traceless mode, click on it, wait a few seconds, and then close it.

Settings panel

Click the Settings button on the right to expand the following menu:

  • Disable JavaScript samples: Disables JavaScript sampling. When disabled, all JavaScript call stacks are ignored in the record, and the Main section of the record is shorter than when enabled.
  • Enable advanced paint instrumentation(slow): Opens the Accelerated Render tool. There is a significant performance overhead
  • Network: Control network
  • CPU: Controls the CPU working frequency during recording. Such as4x slowdownThis option slows down your local CPU by up to 4 times.

FPS

The number of frames per second is a measure of the performance of an animation.

Normally, if the page is smooth, the FPS should be around 60, that is, 60 re-renders per second, and each re-render should take no more than about 16.7ms. As shown in the figure below, the higher the green bar, the better the frame rate. If you have a long red bar, it means the frame rate is too low and there may be a problem.

Of course, if there are many red bars, as shown in the picture below, it means that the page frame drop affects the user experience.

Hover your mouse over any part of the FPS,CPU, or NET chart and Screenshots will appear at that point in time (if Screenshots are checked). Move your mouse left and right to see the entire page loading process.

CPU

Below the FPS is the CPU diagram, and the colors in the diagram match those in the Summarytab at the bottom of the panel. The more colorful the CPU icon is, the CPU usage is maximized during recording. Of course, if the rich color of the long bar is relatively long, it means that it has been occupying CPU, at this time, it may lead to web page lag, which requires code optimization.

NET

In NET, each horizontal bar represents a resource, and the longer the horizontal bar, the longer the time required to request the resource, which is the same as the following Network.

Flame figure

Network

You can see the details of the network request

Frame

Represents the run of each frame. Hover over the green square of the Frame below to see the FPS value for that particular Frame.

Timings

  • FP (First paint) : Refers to the time when the first pixel starts to be drawn on the screen, such as the background color of a page
  • FCP (First Contentful Paint) : Refers to the time to start drawing content, such as text or images
  • LCP (Largest Contentful Paint) : Render time of the Largest content element visible in the viewport
  • FMP (First Meaningful Paint) : The First Meaningful Paint
  • DCL (DOMContentLoaded) : Indicates that the HTML is fully loaded and parsed
  • L (Onload) : event that all resources on the page are loaded

Main

Record the execution record of the Main thread in the rendering process. Click Main to see the specific situation of the execution of a Task, analyze the Event Loop of the Main thread, and analyze the time consuming and call stack information of each Task

There are many tasks in the panel. If the Task is time-consuming, it will be marked in red on the upper right corner. In this case, you can select the Task marked in red, locate the time-consuming function, and optimize it accordingly.

Compositor

Compositor Execution record of the Compositor thread, which records layer compositing operations after the HTML Paint phase

Raster

Rasterized thread pool, used to make gpus perform rasterized tasks

GPU

You can intuitively see when GPU acceleration is enabled

Statistical panel

Summary

Statistical figure. Show how long each phase of the event took

  • Blue (Loading) : Network communication and HTML parsing

    The event describe
    Parse HTML The browser performs HTML parsing
    Finish Loading Network request completion event
    Receive Data The response data of the request arrives at the event, which may be triggered multiple times if the response data is large (unpacked)
    Receive Response Triggered when the response header packet arrives
    Send Request Triggered when a network request is sent

  • Yellow (Scripting) : JavaScript execution

    The event describe
    Animation Frame Fired Triggered when a defined animation frame occurs and the callback processing begins
    Cancel Animation Frame Triggered when canceling an animation frame
    GC Event Triggered when garbage is collected
    DOMContentLoaded Triggered when the DOM content in the page has been loaded and parsed
    Evaluate Script A script was evaluated.
    Event Js event
    Function Call Triggered only when the browser enters the JS engine
    Install Timer Triggered when a timer is created (calling setTimeout() and setInterval())
    Request Animation Frame The requestAnimationFrame () call preorders a new frame
    Remove Timer Triggered when a timer is cleared
    Time Triggered by a call to console.time()
    Time End Triggered by a call to console.timeend ()
    Timer Fired The timer is triggered after the callback is activated
    XHR Ready State Change Triggered when an asynchronous request becomes ready
    XHR Load Triggered when an asynchronous request has finished loading

  • Purple: Style calculation and layout

    The event describe
    Invalidate layout Triggered when a DOM change invalidates the page layout
    Layout Triggered when page layout calculations are executed
    Recalculate style Triggered when Chrome recalculates element styles
    Scroll Triggered when the embedded window scrolls

  • Green (Painting)

    The event describe
    Composite Layers Chrome’s rendering engine is triggered when the image layer is merged
    Image Decode Trigger when an image resource completes decoding
    Image Resize Trigger when an image is resized
    Paint Triggered when the merged layer is drawn to the corresponding display area

  • Gray (other) : Time taken by other events

  • Idle: Indicates the Idle time

Bottom-Up

When you want to analyze which activities take more time, you can see the order of the time consumed by each event in this Tab

  • Self Time: refers to the time consumed by removing the child event itself
  • Total Ttime: The elapsed time of this event from start to finish (including child events)

Call Tree

The call stack. Main Selects an event that represents a list of events called in sequence

Event Log

Represents a sequential list of events

  • You can view the start time of the event, and the event description is displayed on the right

Github address for this article

Refer to the article

  • Performance features reference
  • An incomplete guide to Web page performance analysis
  • Chrome – Performance page performance analysis tutorial