Article directory
1.Performance
Performance is a function in Chrome developer tools, which is used to record all performance indicators of web pages from initialization to runtime.
Performance can be understood as an interface to the field of performance evaluation. You can get many performance parameters through performance, use performance to locate where there is a problem, and where there is a problem, where to change it.
2. Test performance operation process
1. In Google Chrome mode (F12), switch to the Performance tab.
2. Click the refresh icon to reload the page, and a web page analysis progress bar appears.
3. After stopping, a performance analysis graph will appear
3. Detailed explanation of Performance test results
1. Divide the entire Performance panel into 4 areas
Area 1: controls [control bar]
1. The recording and stop buttons can draw the performance track of the time axis of the current page for a period of time in real time, the time is seconds, and generate a performance analysis chart after stopping.
2. Screenshot option, you need to check it to display the screenshot (usually it is checked by default)
3. Memory check box: the status of the time resource corresponding to the indicator.
This line chart is only available when the Main thread is clicked, and the line chart area is blank when other indicators are selected.
JS Heap: Indicates the memory size occupied by JS.
Documents: Indicates the number of documents.
Nodes: Indicates the number of Node nodes.
Listeners: Indicates the number of listeners.
GPU Memory: Indicates the GPU usage.
4. Indicates network speed control, 3G fast, 3G slow, or custom network speed can be selected.
5. Indicates whether to decelerate the CPU. You can choose 4 times deceleration or 6 times deceleration, which can be used to test the impact of CPU on page performance in extreme environments.
Area 2: overview [page performance overview map]
FPS (frames per second), CPU (CPU occupancy), NET (network resource occupancy), HEAP (JS occupancy), a total of four indicators.
ps: In the performance report, there are a lot of data. You can double-click, drag, select with the mouse, scroll the wheel, etc. to zoom in and out of the scope of the report, and observe the analysis report from various time periods.
1. FPS [Frames Per Second] : Indicates the number of frames transmitted per second, which is a unit of speed and is used to analyze a major performance indicator of animation.
Animations with a frame rate of 50 to 60 FPS will be quite smooth and comfortable; animations with a frame rate of 30 to 50 FPS will vary from person to
person depending on their sensitivity;
Animations below 30 FPS will make people feel obvious stuttering and discomfort;
animations with large frame rate fluctuations will also make people feel stuttering.
The higher the green vertical line, the higher the FPS. Red indicates a long time frame, and there may be stuttering.
2. CPU resources : This area graph indicates the types of events that consume CPU resources.
The colors are (consistent with the color data representation in data statistics):
Blue (Loading): Indicates network communication and HTML parsing time.
Yellow (Scripting): Indicates JavaScript execution time.
Purple (Rendering): Indicates style calculation and layout (reflow) time.
Green (Painting): Indicates redrawing time.
Gray (other): Indicates the time spent on other events.
White (Idle): Indicates idle time.
3. NET : Each colored bar represents a resource. The longer the bar, the longer it takes to retrieve the resource. The light-colored portion of each bar represents the latency (time from when the resource is requested to when the first byte is downloaded).
4. HEAP : Time distribution of JavaScript execution.
Area 3: Flame graph [Visualization of stack tracking of various indicators]
1. Network: Indicates the loading status of each server resource.
2. Frames: Indicates the running status of each frame.
3. Timings:
The dotted lines and marks in the figure indicate the following:
FP (First Paint) is the time when the first screen is drawn and the page is just rendered.
FCP (First Contentful Paint) first-screen content drawing, the first time to draw any text, image, non-blank canvas or SVG.
LCP (Largest Contentful Paint) draws the largest content, and the drawing time of the largest element on the page
DCL (DOMContentLoaded) indicates the HTML document loading completion event. Fired when the initial HTML document is fully loaded and parsed, without waiting for styles, images, or subframes to end. In obvious contrast, the load event fires when a page is fully loaded.
L (Onload) The event that all resources on the page are loaded.
FMP (First Meaningful Paint) draws meaningful content on the first screen. There is no authoritative regulation for this "meaningful". In essence, it uses an algorithm to guess that a certain point in time may be FMP. Some understand it as the time to draw the largest element, which is the same as LCP (Largest Contentful Paint).
Among them, FP, FCP, and FMP are the same dotted line, and the times of the three are inconsistent. For example, after the first rendering, there may be JS blocking. In this case, FCP will be greater than FP.
4. Main: Indicates the main thread, mainly responsible for: Javascript calculation and execution; CSS style calculation; Layout layout calculation; drawing page elements into bitmaps (paint); giving bitmaps to the synthesis thread.
The X-axis represents time, and each bar represents an event. The longer the bar, the more time it takes. The Y-axis represents the call stack. In the stack, the event above calls the event below.
If a red triangle appears in the upper right corner of the performance bar, it means that there is a problem with this event and you need to pay special attention. Double-click the event with the little red triangle. Details can be seen in the Summary panel. Note the reveal link, double-clicking it will highlight the event that triggered this event. If you click on the link angular-1.4.7.min.js:1135, you will jump to the corresponding code.
Area 4: Statistical Summary [summarize data in the form of charts]
After recording the page, there is no need to rely only on the Main section to analyze the activity. DevTools also provides three table views to analyze activity. Each view provides you with different perspectives on activities:
1. Summary: indicates the time occupancy statistical report of each indicator;
2. Bottom-Up: indicates the sorted list of event duration (reverse order) => you can directly view the activities that take the most time;
3. Call tree: Indicates the sequence list of event calls => you can directly view the root activities that cause the most work;
4. Event Log: Indicates the sequence list of events => view activities in the order of activities during the recording period;
4 Other Monitoring Performance Gadgets
4.1 Performance monitor panel: real-time monitoring of page performance
4.2 Real-time FPS panel: It can display the FPS indicator of the page in real time
-
Press Control+Shift+P to open the command menu
-
Enter Rendering, click Show Rendering
-
In the Rendering panel, activate the FPS Meter. The FPS real-time panel appears at the top right of the page.
