How to measure time taken by a function to execute using JavaScript ?

Last Updated : 18 Jan, 2024

This article will show how to measure the time taken by a function to execute using Javascript.

To measure the time taken by a function to execute we have three methods:

Table of Content

Using the Using Date Object
Using the performance.now() method
Using the console.time() method

Method 1: Using the Using Date Object

We can use the Date object to calculate the time taken by a function. we are using getTime() method from the Date object and then we calculate the average time taking by a function to execute.

Syntax:

// Get current time in milliseconds
Start = new Date().getTime(); 

// Your function or code block here
 end = new Date().getTime();

// Calculate execution time in milliseconds
executionTime = endTime - startTime;

Example: This example explains the above-used approach.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>Measure Execution Time</title>
</head>
   
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>
          How to measure time taken by a function to
          execute using JavaScript?
      </b>
    <p>
        Click on the button to measure the time taken by 
          the function. The output would be displayed on 
          the console.
    </p>
    <button onclick="measurePerformance()">
        Click to check
    </button>
    <script type="text/javascript">
        function measurePerformance() {
           
              // Get current time in milliseconds
            const startTime = new Date().getTime(); 
            exampleFunction();
            const endTime = new Date().getTime();
            const timeTaken = endTime - startTime;
            console.log("Function took " + timeTaken + " milliseconds");
        }
 
        function exampleFunction() {
            for (let i = 0; i < 1000; i++) {
                console.log('Hello Geeks');
            }
        }
    </script>
</body>
   
</html>

Output:

Method 2: Using the performance.now() method

The now() method of the performance interface returns a high-resolution timestamp whenever it is called during the program. The time can be measured by getting the starting time before the function and the ending time after the function and then subtracting both of them. This gives the time elapsed for the function.

Syntax: This example explains the above-used approach.

start = performance.now();
function_to_call();
 end = performance.now();

Example: This example explains the above-used approach.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>Measure Execution Time</title>
</head>
   
<body>
<h1 style="color: green">
    GeeksforGeeks
</h1>
 
<b>
    How to measure time taken by a function
    to execute using JavaScript?
</b>
 
<p>
    Click on the button to measure the time
    taken by the function. The output would
    be displayed on the console.
</p>
 
<button onclick="measurePerformance()">
    Click to check
</button>
 
<script type="text/javascript">
    function measurePerformance() {
        start = performance.now();
        exampleFunction();
        end = performance.now();
        timeTaken = end - start;
        console.log("Function took " +
                timeTaken + " milliseconds");
    }
     
    function exampleFunction() {
        for (i = 0; i < 1000; i++) {
            console.log('Hello Geeks');
        }
    }
</script>
   
</body>
</html>

Output:

Method 3: Using the console.time() method.

The time() and timeEnd() methods of the Console object could be used as a timer to measure the time taken between these two methods. It takes a label parameter that could be used to distinguish between multiple timers. Whenever the timeEnd() method is called, the timer is stopped and the time output is given to the console.

Syntax:

console.time('label');
function_to_call();
console.timeEnd('label');

Example: This example explains the above approach.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>Measure Execution Time</title>
</head>
   
<body>
<h1 style="color: green">
    GeeksforGeeks
</h1>
 
<b>
    How to measure time taken by a function
    to execute using JavaScript?
</b>
 
<p>
    Click on the button to measure the time
    taken by the function. The output would
    be displayed on the console.
</p>
 
<button onclick="measurePerformance()">
    Click to check
</button>
 
<script type="text/javascript">
    function measurePerformance() {
        console.time('function1');
        exampleFunction();
        console.timeEnd('function1');
    }
     
    function exampleFunction() {
        for(i= 0;i <1000; i++) {
            console.log('Hello Geeks');
        }
    }
</script>
   
</body>
</html>