Performance debugging -- chrome performance

order

In front end development , Performance optimization is basically a necessary learning point , This article mainly talks about using

chrome

Of

performance

For performance tuning .

Use

open chrome browser , Use

F12

Pop up developer tools , find

Performance

Here I first create a web page example , Two element blocks , Click to change the width and height ：

Then click the start recording button on the right , perhaps

ctrl + e

Run the recording , After recording , You can view the performance report content of the interaction phase in the performance interface

• At the top is the overview of interface rendering , You can view the process of each step before through the picture frame , The time is accurate to milliseconds .

• Performance panel ：（ There are several parts of data here ）

• Network  The Internet , There is nothing in my example here

• Frames frame

• Main  The main , Main thread activity , yes Performance The more important part of the tool , Records the execution record of the main thread in the rendering process , Click to see the specific implementation of a task

• Raster  grating , Used to make GPU Perform rasterization tasks

• GPU,GPU The execution process record of the main thread of the process , You can visually see when to start GPU Speed up

• Memory panel , You can see the process JS And so on

• Summary  Abstract , It is used to count the time range of detection performance , What has been done

Reference article ：

Chrome Of Performance panel

Rearrange position

Click on the box above , Rearrangement and redrawing will occur , The specific process here can also be seen .

The two green patches at the back here represent

draw

and

Compound Layer

For rearrangement, please refer to

《HTML  Reflow and redraw 》 

The above is about the interface DOM Performance monitoring of element changes , Next, you can see if it is JS Script , What will happen task The process

Below JavaScript Code , Because there is

settimeout

, The result should be

fn1 fn3 fn2

let f1 = ()=>{
 console.log('fn1');
}
let f2 = ()=> {
 setTimeout(() => {
 console.log('fn2');
 });
}
let f3 = ()=>{
 console.log('fn3');
}

let fun = ()=>{
 f1();
 f2();
 f3();
}

Performance analysis ：

Here because f2 There is settimeout, therefore task The task is divided into two parts , The first block contains f1、f2、f3. In the second piece is f2 Of settimeout Anonymous function execution .

Besides , There is a Call Tree Call tree , Be able to analyze and judge your method well