The original link: developers.google.com/web/tools/c… Related articles: github.com/hewq/blog/b…

Disable JavaScript Samples

  • By default,MainThe section details the JavaScript call stack, usingDisable JavaScript SamplesYou can hide these calls. Things like custom function calls are hidden. Below is a comparison of before and after hiding

View the main thread

  • MainPart of the main thread records the activity of clicking one of the events inSummarySee the panel for more details

DevTools uses a flame diagram to represent the main thread activity. The X-axis represents the record over time, and the Y-axis represents the events invoked. Upper-level events invoke (fire) lower-level events (anonymousStands for anonymous function)

Call Tree

  • useCall TreeTo see which root event takes the most time.Call TreeOnly the selected part of the record is displayed.

  • Self Time represents the Time spent directly on the event, and Total Time represents the Total Time spent on the event and all its descendants.

  • By default, the Grouping menu is set to no grouping, and you can use the grouping menu to sort active tables according to various criteria.

  • Click on theShow Heaviest Stack

It shows which of the selected sub-events took the longest to execute.

Bottom-Up

  • useBottom-UpYou can see which activities take up the most time overall.Bottom-UpOnly the selected part of the record is displayed.

In the fire diagram above, you can see that almost all of the time is spent on three calls to WAIT, so the bottom-up is wait at the top; The yellow section below the wait calls is actually thousands of GC calls, so the next most expensive is the Minor GC.

  • Self Time represents the Time spent directly on the event, and Total Time represents the Total Time spent on the event and all its descendants.

Event Log

  • useEvent LogYou can view the execution of events in chronological order

  • Start Time Indicates the Start Time relative to the record. For example, 1573.0ms in the figure indicates that the event is executed 1573 milliseconds after the record starts.

  • Self Time represents the Time spent directly on the event, and Total Time represents the Total Time spent on the event and all its descendants.

Interactions

  • Interactions were used to analyze user Interactions that occurred during recording. The red line at the bottom represents the time spent waiting for the main thread.

Memory

  • Enable Memory to view Memory usage during recording.

Enable advanced paint instrumentation

  • To enable theEnable advanced paint instrumentationIn theMainClick on thePaint.Paint ProfilerThe panel displays advanced information about the draw event