Use the console for Performance Testing

Use the console for Performance Testing

The built-in development tools of various browsers provide a console object. It mainly has two functions: displaying error information during webpage code running. Provides a command line interface to interact with webpage code. Next we will study in detail how to use the console for performance testing.

Front-end developers often need to monitor the values of certain expressions or variables during the development process. If debugger is used, it will become too cumbersome, the most common method is to output the value to the console for debugging.

The most common statement is console. log (expression.

Start with an Alibaba intern recruitment test question:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Function f1 (){ Console. time ('time span '); } Function f2 (){ Console. timeEnd ('time span '); } SetTimeout (f1, 100 ); SetTimeout (f2, 200 );   Function waitForMs (n ){ Var now = Date. now (); While (Date. now ()-now <n ){ } } WaitForMs (500); // time span: 0 ms

Let's talk about the advanced operations on the console, and finally analyze this question together.

Trace

Console. trace () is used to trace the function call process.

In large-scale projects, especially framework development, the call track of functions can be very complex. The console. trace () method can clearly output the function calling process to the console.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Function tracer (){ Console. trace (); Return; }   Function foo (){ Return bar (); }   Function bar (){ Return tracer (); }   Var a = foo ('tracer ');

Table

Use console to present objects in tables

The input objects or arrays can be output in the form of tables. Compared with the traditional tree output, this output scheme is more suitable for objects or arrays with neat internal elements. Otherwise, many undefined objects may appear.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Var people = { Flora :{ Name: 'floram ', Age: '12' }, John :{ Name: 'johnm ', Age: '45' }, Ray :{ Name: 'rayguo ', Age: '22' } };   Console. table (people );

Firefox console:

Time timeEnd

Computing program execution time

You can output the running time of codes between console. time () and console. timeEnd () to the console.

?

1 2 3 4 5

Console. time ('timer '); For (var I = 0; I <1000; I ++ ){ For (var j = 0; j <1000; j ++ ){} } Console. timeEnd ('timer ');

The above code calculates the events required for the code block between console. time ('timer '); and console. timeEnd ('timer.

Profile

Use console to test program performance

During development, we often need to evaluate the performance of a code segment or a function. You can print the time manually in the function, but it is not flexible enough and has errors. With the help of the console and console. profile () method, we can conveniently monitor the running performance.

?

1 2 3 4 5 6 7 8 9 10 11

Function parent (){ For (var I = 0; I <10000; I ++ ){ ChildA () } } Function childA (j ){ For (var I = 0; I <j; I ++ ){} } Console. profile ('performance analytics '); Parent (); Console. profileEnd ();

The code above calculates the running efficiency of functions involved in the code block between console. profile ('performance analytics '); and console. profileEnd.

Now let's go back to the test questions

Measure the test taker's knowledge about console. time and JavaScript single-thread.

The console. time () and console. timeEnd () statements are used to timing program execution.

SetTimeout () accepts two parameters. The first parameter is the callback function, and the second parameter is the number of milliseconds for deferred execution. SetTimeout () Only inserts an event into the "task queue". The main thread will execute the specified callback function after the current Code (execution stack) is executed.

Because f1 and f2 are installed into an event queue by the timer set in advance by setTimeout. Originally, f1 should be executed in MS, but because waitForMs occupies the thread and JavaScript is executed in a single thread, there is no way to execute that f1 after Ms, so we need to wait for MS and wait for waitForMs to finish execution, and then execute f1 and f2. At this time, f1 and f2 are executed almost simultaneously.

The above is all the content of this article. I hope you will like it.