Chrome developer tool — performance reference

Time:2021-1-23

Link to the original text:https://developers.google.com…
Related articles:https://github.com/hewq/blog/…

Disable JavaScript Samples

  • By default,MainSection will record the call stack of JavaScript in detail, using theDisable JavaScript SamplesYou can hide these calls. Like some custom function calls will be hidden. The figure below shows the comparison before and after hidingChrome developer tool -- performance referenceChrome developer tool -- performance reference

Chrome developer tool -- performance referenceChrome developer tool -- performance reference

View main thread

  • MainSection records the activity of the main thread. Click one of the events, and clickSummaryPanel for more detailed informationChrome developer tool -- performance referenceChrome developer tool -- performance reference

Devtools uses a flame diagram to represent the activity of the main thread. The x-axis represents the records over time, and the y-axis represents the events called. The upper event calls (triggers) the lower event(anonymousOn behalf of anonymous function)Chrome developer tool -- performance referenceChrome developer tool -- performance reference

Call Tree

  • useCall TreeTo see which root event takes the most time.Call TreeOnly the records of the selected part are displayed.Chrome developer tool -- performance referenceChrome developer tool -- performance reference
  • Self TimeRepresents the time spent directly on the event,Total TimeRepresents the total time spent on the event and all its descendants.
  • By default, the group menu is set to no group. Using the group menu, you can sort the activity table according to various criteria.
  • clickShow Heaviest StackChrome developer tool -- performance referenceChrome developer tool -- performance reference

Which of the selected events have the longest execution time is displayed.

Bottom-Up

  • useBottom-UpYou can see which activities take up the most time overall.Bottom-UpOnly the records of the selected part are displayed.Chrome developer tool -- performance referenceChrome developer tool -- performance reference

In the flame diagram above, you can see that almost all the time is spent in three pairswaitSoBottom-UpAt the top of the list arewaitwaitCalling the yellow part below is actually thousands of GC (garbage collection) calls, so the next one that costs the most isMinor GC

  • Self TimeRepresents the time spent directly on the event,Total TimeRepresents the total time spent on the event and all its descendants.

Event Log

  • useEvent LogYou can view the execution of events in chronological orderChrome developer tool -- performance referenceChrome developer tool -- performance reference
  • Start TimeRepresents the start time relative to the record, such as in the figure1573.0msIndicates that the event was executed 1573 milliseconds after the start of recording.
  • Self TimeRepresents the time spent directly on the event,Total TimeRepresents the total time spent on the event and all its descendants.

Interactions

  • useInteractionsTo analyze the user interaction during the recording process. The red line at the bottom indicates the time spent waiting for the main thread.

Memory

  • EnableMemoryYou can view the memory usage during the recording process.

Enable advanced paint instrumentation

  • EnableEnable advanced paint instrumentation, inMainClick inPaintPaint ProfilerThe panel displays advanced information about drawing eventsChrome developer tool -- performance referenceChrome developer tool -- performance reference