This is the study & research notes, if there are mistakes also please correct!

Related articles

  • Elements article
  • Sources report

When the page is slow or sluggish, you can use Performance to analyze the cause of the problem.

panel

Performance indicates the runtime Performance. The panel is as follows:

use

  • Use invisible Windows to open projects (such as online test demos)
  • Click the record button (black dot) to record the page performance during this period
  • Click on thestopstop

Panel function analysis

It is divided into four areas as follows

Area 1: Control panel

  • ScreenshotsScreenshot: This parameter is selected by default. Each frame is captured. The lower part of area 2 will be removed when closed (marked in the red box below).

    Watch the page change as you move through the timeline

  • MemoryMemory consumption record: After checked, you can see various memory consumption curves

[The following configuration is used to simulate the use of mobile phones, slow network, no need to skip]

  • Disable javaScript samplesTurn off javaScript samples: Reduce overhead during the phone run time, simulate the phone run time check
  • NetworkNetwork simulation: it can simulate running pages under 3G,4G and other network conditions
  • Enable advanced paint instrumentation(slow)Record the details of the render event: Select one of the frames and you can see that there are four more regionsLayers
  • CPUCPU limit: Mainly to simulate performance on the bottom CPU

Area 2: Overview Panel (Overview)

1 . FPS

FPS: frames per second, 60FPS is the standard for animation

Oblivious to optimize

The higher the green, the better, and red means the lower FPS (which is why you think the page is stuck). You can see the specific FPS in the area 3 Frames (see second image below).

Do the test

Repeat the ADD 10 button of DEMO several times until the picture feels not smooth, then start the analysis record, as follows

2 . CPU

CPU: The time spent processing each task. Select a section of CPU statistics to see the Summary table in area 4

  • ScriptingThe script
  • RenderingApply colours to a drawing
  • Paintingdraw
  • Loadingloading
  • ldleidle

Oblivious to optimize

There may be a problem with colors that are heavily weighted, such as the purple Rendering in the image above, which means Rendering takes a long time

3 . NET

NET: The time spent by each request can be seen in network to make it clearer

Area 3: Thread panel

1 . Frames

Frames: Frames thread, hover green block to see FPS

2. Main

Main: The Main thread that executes Javascript, parses HTML/CSS, and does the drawing. You can see the main thread call stack and the elapsed time, each bar is an event, and hover to see the elapsed time and event name

  • The X-axis is the top of the time line where the event is triggered, until the end, this line is the longest
  • The Y-axis refers to the event at the top of the call stack that calls the following sub-events, and the lower the number of sub-events is (waterfall)

The colors represent each event type, but some common events are listed below

3. Raster

Raster: Raster thread, which is responsible for drawing a layer or tiles.

Area 4: Statistics panel

Statistics panel selection due to click to select different target statistics content is different

  • Summary chart: Shows the elapsed time for each phase of the event

  • Bottom-up order: you can see the time consumed by each event (1)self-time refers to the time consumed by the event itself excluding the sub-event (2)total-time Refers to the time consumed by the event from start to end (including the sub-event).

  • Call Tree Call stack: Main selects an event to see the entire Call stack for the event (from top to bottom, not just the current event)

  • Event Log Event Log (1) Contains a start time, indicating the number of milliseconds when the Event is triggered. (2) The Event description is displayed on the right

Enabling Real-time Monitoring

  1. In the controlctrl+shift+pOpen command line
  2. searchShow Rendering
  3. Check theFPS Meter

Extension: Browser rendering process

Reference documentation

Segmentfault.com/a/119000001…

www.bubuko.com/infodetail-…

www.xue63.com/toutiaojy/2…

www.css88.com/doc/chrome-…

www.cnblogs.com/hellotyc/p/…

Read more here: official documentation