Link: Performance Analysis Reference

Toolbar Introduction

: Click to start recording

: Refresh the page and record again. It will stop automatically

: delete

: Displays the memory usage

: Force garbage collection

: set, click the button to setDisabled JavaScript samplesEtc related function

: Set the network

: Adjust CPU performance (mainly used to mimic the mobile environment, etc.)

The rest is covered in the following sections


Screenshot

When enabled, a screenshot of the current screen will be displayed under the Frame TAB

If it is closed, none

Disabale Javascript samples

When unchecked, each JavaScript function called is displayed below main

The figure shows the Function Call being invoked after the DomContentLoaded event is triggered; Function Call (e()); And so on (Timeline event Reference)

When checked, there are no detailed function calls

Enable advanced paint instrmentation(slow)

View rendering;


An overview of bar

: Frames per second; The higher the green bar, the higher the FPS.FPS chartredRepresents a long time frame that is likely to stall.

For example, in the picture below, we can move the Summary bar and focus the timeline into the red block attachment. We find that there are small red blocks in the upper right corner such as Layout. Click these events, and the corresponding events and corresponding code positions will be displayed under Summary.

: CPU resource. This area indicates the event type that consumes CPU resources.

: Each colored bar represents a resource; The longer the bar, the longer it takes to retrieve the resource.

The light colored part of each bar represents the wait time (from the time the resource was requested to the time the first byte was downloaded)

The dark part represents the transfer time (the time between the first and last byte downloaded)

To viewMainBlock under the event

After selecting the corresponding block, you can view the details in the Summary, Call Tree, bottom-up, and Event Log

  • Call TreeView function calls





    • Slef time: the time taken by the current function call

    • Total Time: total time spent with its subfunctions

    • The filter:

    • Grouping: Grouping activity tables based on conditions.

    • Show busiest Stack: Displays which sub-functions of the selected activity are being executed for the longest time

  • Bottom-upSee which function calls take the longest





    • slef timeThe time taken by the current function call
    • total timeIt’s the total time it takes with its sub function

  • Event LogView events in the order they were recorded





    • Duration: Screening by time spent

Look at other

  1. GPU
  2. Raster(grating)
  3. interactions: View user interactions
  4. network

  • Color piece is introduced
    • HTMLFile forblue.
    • JSforyellow.
    • CSSforpurple.
    • Imagesforgreen.
    • Other resources are in gray.
  • Priority The darker the blue in the upper left corner, the higher the priority

  • withnetworkColumn mapping
    • Left line: before request send
    • Light colored blocks: Request send and TFTB
    • Dark block: Content Download
    • Right line: wait for main thread time, not displayed in Timing

  1. View specific block consumption time by holding downshift, click the mouse to select a block, and view the time consumed by the segment

Others – analysis drawing

  1. According to theesc, click, the choice ofrendering tab

  1. Open theFPS meterTo display the FPS of the current page in real time. The higher the number of frames, the smoother the animation display.

  1. Paint flashing, real-time display browser draw, redraw, will show the green border

  1. Layer Borders Displays the composite boundaries of the Layer

    • Yellow border: Used to display the layer on the page
    • Blue grid lines: Represent blocks, which can be viewed as units one level lower than a layer
    • Other color border lines, such as images with a separate layer, are blue

  2. Scrolling Issues Analyze Performance Issues during mouse Scrolling. Areas that make Scrolling slow are displayed.

For details, see Chrome Rendering Analysis Rendering tool

Moving the timeline

  1. The mouse moves
  2. useA,D,W,STo adjust the time axis

Save/Export

Right-click Save Profile to download the current performance analysis view

Click Load Profile to Load the last view for analysis

Pay attention to

  • Keep the record as short as possible. A short record usually makes analysis easier.
  • Avoid unnecessary operations. Avoid actions that are not associated with the activity you want to record and analyze (mouse clicks, network loads, and so on). For example, if you want to record what happens after you click the Login button, don’t scroll the page, load the image, and so on.
  • Disable the browser cache. When recording Network operations, it is a good idea to disable the browser cache from the DevTools Settings panel or Network Conditions draw-out navigation bar.
  • Disable the extender. The Chrome extension adds irrelevant noise to the app’s Timeline records. Open a Chrome window in instealth mode or create a new Chrome user profile to make sure there are no extensions in your environment.

Remark:

  • Timeline Event Reference
  • Optimize Website Speed With Chrome DevTools
  • Chrome Rendering analysis Rendering tool