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

This article introduces chrome’s Performance panel.

Open the way

The Performance panel is opened in the same way as the NetWork panel

Mode of operation

Before you start recording, cut toElements tabNext,bodyfordelete elementThe result of this operation will be more accurate

We divide the recorded result page into three areas, as shown below:

  1. An overview of
  2. The performance of the panel
  3. In this paper, performance

An overview of

The overview section shows the events executed during each period of page rendering. When the mouse is up, you can also view the screenshots of each period of page in the form of a large picture. Such as page frame rate (FPS), CPU resource consumption, network request traffic, V8 memory usage (heap memory), etc.

The performance of the panel

In the overview area, you can see that the performance panel and performance summary areas have changed. Let’s focus on the parts that have our own JS implementation.

network

In this section you can see the loaded files, in order: index.html, style.css, font-js, jquery, main.js, and so on. This section is similar to what we saw in the Network panel.

Timings

This section can record the time information of some key nodes.

  • FP (First Paint): The time when any element on the page is first rendered.
  • FCP (First Contentful Paint) : The time when the browser first renders any text, image (including background image), and non-blank canvas tag or SVG vector image.
  • DCL (DOMContentLoaded Event)When pure HTML is fully loaded and parsed,DOMContentLoadedEvents are triggered without waiting for the stylesheet, image, or subframe to finish loading.
  • LCP (Largest Contentful Paint): The maximum content element that can be displayed in a visual window, the required rendering time, generally speaking, need to consider the following elements:
    • imgThe element
    • Image element embedded in SVG
    • Video element (use cover image)
    • The element that owns the background image (via url())
    • Block-level elements that contain text nodes or inline text nodes
  • L (Onload Event): Executes the Javascript code when the page is loaded.

Main

From Main, you can see how the code executes. Click on Evaluate Script(yellow) to see which part of the JS code executes in that area

Parse HTML → Evaluate Script → Compile Code → Recalculate Style → Layout → Paint

In this paper, performance

Event execution times for selected areas in the overview diagram are displayed in the Summary. As can be seen from the following figure:

  • Loading(加载时间)：27ms
  • Scripting(JS execution time) : 82ms
  • Rendering(渲染时间)：8ms
  • Painting(Painting time) : 1ms
  • System(系统时间)：38ms
  • Idle: 29ms

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.