Using console for performance testing _javascript tips

For front-end developers, often in the development process to monitor the value of some expressions or variables, if the use of debugger will appear too cumbersome, the most common method is to output the value to the console for easy debugging.

The most commonly used sentence is console.log (expression).

From an earlier Ali intern recruitment written questions to start:

Function F1 () {
  console.time (' time span ');
}
function F2 () {
  console.timeend (' time span ');
}
settimeout (F1);
settimeout (F2);

function Waitforms (n) {
  var now = Date.now ();
    while (Date.now ()-now < N) {
  }
}
waitforms;//time span:0ms

Let's talk about the advanced operation of console, and finally analyze the problem together.

Trace

Console.trace () is used to track the calling procedure of a function.

In large projects, especially in framework development, the call trajectory of functions can be very complex, and the Console.trace () method can clearly output the called procedure of a function to the console.

function Tracer (a) {
   console.trace ();
   return A;
}

function foo (a) {return
   bar (a);
}

function Bar (a) {return
   tracer (a);
}

var a = foo (' tracer ');

Table

Using console to render an object in a table

You can output incoming objects, or arrays, in tabular form, which is more suitable for objects or arrays of internal elements than traditional tree output, or there may be a lot of undefined.

    var people = {
    Flora: {
      name: ' Floralam ', age
      : ' A '
    },
    John: {
      name: ' Johnma ', age
      : ' 45 '
    },
    ray:{
      name: ' Rayguo ', age
      : '
  n

  '}; Console.table (people);

Firefox's console:

Time Timeend

The execution time of the calculation program

You can output code running time between pairs of console.time () and Console.timeend () to the console

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 Console.time (' Timer ') and the events required by the code block between the Console.timeend (' Timer ').

Profile

Using Console to test program performance

In development, we often have to evaluate the performance of a piece of code or a function. While it is possible to print the time manually in a function, it is inflexible and error-less. With the help of the console and the Console.profile () method, we can easily monitor the performance of the operation.

function parent () {for
   (var i = 0; i < 10000. i++) {
      Childa ()
   }
}
function Childa (j) {for
   (VA R i = 0; I < J; i++) {}
}
console.profile (' profiling ');
Parent ();
Console.profileend ();

The above code calculates console.profile (' performance analysis ') and Console.profileend (), and the functions involved in the code block run efficiently.

Now, back to the written question.

The topic examines the candidate to console.time the understanding and the JS single path understanding.

The Console.time () statement and the Console.timeend () statement are used to timing the execution of the program.

SetTimeout () accepts two parameters, the first is a callback function, and the second is the number of milliseconds to defer execution. SetTimeout () simply inserts an event into the task queue, and the main thread does not execute the callback function it specifies until the current code (the execution stack) is executed.

Because F1 and F2 are all settimeout pre-set timers into an event queue. Originally F1 should be executed after 100ms, but because the waitforms occupy the thread, and the execution of JavaScript is single-threaded, so there is no way to execute the 100ms after the F1, so need to wait for 500ms waitforms execution, Then in the execution of F1 and F2, F1 and F2 are executed almost simultaneously.

The above mentioned is the entire content of this article, I hope you can enjoy.