Is your code fast enough? Let's find out in Chrome Dev Tools

We all have that curiosity to find out that is my code fast enough, when is it loaded in the application lifecycle, and what is the execution time, or what happens in the application when you just add a function block.

Chrome dev tool is really powerful enough to find out answers of all these questions. You can use the performance API to analyse the role of a code block inside your application.

Let's find out the execution time of for loop to perform 1000000000 iterations.

  performance.mark("start"); // start marker 

  for(let i = 0; i < 1000000000; i += 1){}

  performance.mark("end"); // end marker 
  performance.measure("for loop performance report", "start", "end");

  const measurements = performance.getEntriesByType("measure");
  console.log(measurements);

When you run the above code in the browser, you can find the performance in chrome dev tools.

• Load your application.
• Open Chrome developer tools.
• Select the Performance tab.

• Record the new profiling by clicking on the reload icon.
  

• Check the execution time inside the timing section.
  

You can clearly notice that for loop is executed for 544ms before the FMP(First meaningful paint) and after the onload events.

I hope you find the article useful. Happy learning. ☺️