1 Performance

Runtime Performance refers to how your page performs when the browser is running, not when the page is being downloaded. Use Chrome DevToos Performance to analyze runtime Performance.

1.1 Introduction to Panel Initialization

1.2 introduction of the demo

1.3 FPS chart – Frames Per Seconds

Analyzing frames per second, FPS (Frames per second) is a major performance metric used to analyze animation. Make the page effect refresh at >=60fps /s to avoid stuttering.

Why 60fps? Most current monitors have a similar refresh rate (60Hz). If the web animation is able to achieve 60 frames per second, it will refresh in sync with the monitor for optimal visual effects. At 60 HZ/s, the completion time of each frame (from JS to drawing) is less than 16ms, which can achieve smooth (such as scrolling and dragging).

Look at the FPS chart, and if you see a long red bar, then there is a serious problem with these frames (dropping frames), which can lead to a very poor user experience. In general, the higher the green bar, the higher the FPS and the better the user experience.

1.4 Frames

More -> More tools -> Rendering ->Frame Rending Status

Specific details on the flashing page are repainted.

Click on the triangle arrow to expand the Frames area and hover/click on the green square to see the frame rate and render time for that particular frame.

1.5 the CPU

Color block representation:

  1. In blue are HTML files
  2. Yellow script
  3. Purple is the pattern
  4. Green indicates media files
  5. Gray indicates other resources

Summary: When the CPU is occupied for a long time, is the current page performance needs to optimize the signal. In the CPU chart, you can determine whether the CPU is busy or not based on the fullness of the color filling to know the total number of tasks on the page (visible after hovering). The Summary pie chart tells us, in a straightforward way, which types of tasks take the most time.

1.6 HEAP

You can see the JS memory usage in the HEAP chart, which corresponds to the JS HEAP in the memory pane below. In the Memory pane, you can also see the Memory statistics for Document documents, Nodes DOM Nodes, listeners, and GPU Memory.

1.7 the Network

Hover the mouse to see the specific network request and the time when the request was obtained. If the network request duration is too long, the blank screen duration is affected.

1.8 Event Point in time

  1. FP: First Paint(the point at which the page First appears after navigation that is different from the content before navigation);
  2. FCP: First Contentful Paint(the First time you draw any text, image, non-blank canvas or SVG);
  3. LCP: Largest Contenful Paint(the time a page starts to load to the maximum block of text content or images displayed on the page);
  4. DCL: DOMContentLoaded Event
  5. L: OnLoad Event(Event that all resources on the page are loaded)

1.9 the Main

  1. Expanding the Main diagram, Devtools shows the Main thread health. The X-axis represents time. Each bar represents an event. The longer the bar, the longer the event takes. The Y-axis represents the Call stack. In the stack, the event above calls the event below.
  2. If a small red triangle appears in the upper right corner of the event bar, it indicates that the event is problematic and needs special attention.
  3. Double-click the event with the little red triangle. You can see the details in the Summary panel. Note the reveal link. Double-clicking it highlights the event that triggered the event. If you click on the code hint link, you will be redirected to the corresponding code.

2 Performance API

In the Timing property of Performance, you can view the timestamp. You can view the browser memory in the Memory property of Performance.

2.1 These timestamps have a one-to-one correspondence with key time nodes in the whole loading process of the page

2.2 By finding the difference between two time points, we can get the time taken by a certain process

2.3 Key performance Indicators: FirstByte, FPT, TTI, Ready, and Load time

3 LightHouse

Lighthouse is an open source automation tool designed to improve the quality of web applications. You can run it as a Chrome extension or from the command line. Provide Lighthouse with a site to review, which runs a series of tests against the page and then generates a report on the page’s performance.

3.1 indicators

Page performance, accessibility (accessibility), best practices, SEO, PWA (Progressive Web application). Scroll down to the Report page to see a breakdown of each metric.

In Opportunities, LightHouse even provides actionable recommendations for our performance problems, as well as the anticipated time savings for each optimization.