Using Console for performance testing

Source: Internet
Author: User
Tags arrays

The development tools built into each major browser provide a console object. It has two main functions: Displays the error message when the Web page code is run. Provides a command-line interface for interacting with Web page code. Let's look at how to use the console for performance testing in detail below.

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:

?

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;//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.

?

1 2 3 4 5 6 7 8 9 10 11 12 13-14 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.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16 var people = {flora: {name: ' Floralam ', Age: ' A '}, John: {name: ' Johnma ', Age: ' {'}, ray:{name: ' Rayguo ', Age: ' 22 '   } }; 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

?

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 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.

?

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 (' 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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.