How much time a JavaScript function takes

We all write functions in JavaScript, and when they take a long time to complete, it is not clear which function is taking a long time. Use Console.time method to measure how much time a JavaScript function takes.

You will learn about Console.time and Console.timeEnd APIs in this video

Code

function getData() {
    console.time("github_time")
    fetch("https://api.github.com/users/hhimanshu")
    .then(response=>response.json())
    .then(user=> {
        console.table(user)
        console.timeEnd("github_time")
    })
}

getData()

Full Transcript

0:00 Hello there, Harit here from bonsaiilabs. Today you will learn to measure how much time your code takes to execute. Let's say I have a function called getData. This function makes a call to GitHub using the Fetch Web API. Once the data is available, we extract the JSON data from the response by calling response.json method. This then method returns a new promise, which is the resolved and the user object is available inside the handler. Currently we are printing this user in a tabular format using console.table method. We have covered the console.table method in one of the previous videos. Let's see this code in action. We will first open the developer tools by going to more tools developer tools, and currently I'm in sources tab and I've added a new snippet called time.js. Here, you find implementation of getData.

0:50 It's exactly the same function that we've seen a few moments ago and now we will go ahead and clean the console and run it. As we hit run, we can go to the console tab and confirm that we have received the data from GitHub API. Now let's say we want to find out how much time getData function takes. In order to do that, we are going to leverage the time method available on the console. This method takes a string, also known as label. This label identifies the timer. With this call the timer starts running, but when does the timer end? Well, you need to tell the console when to stop a timer. In our case we want to stop the timer when we have access to the data right after we print it on the console. So we use another method called timeEnd available on console. This method needs the label that was attached to the timer, which in our example is github_time.

1:44 Once the timer is stopped, the elapsed time is automatically displayed in the web console. Let's see that in action. First, we are going to add the timer, so we'll use console.time and add the label github_time. This will start the timer and once we have printed the user on the console, we will call console.timeEnd and provide the same label github_time to stop the timer. Let's clean the console and run the code again. As we do that, we can go to the console and first make sure that we have received the data and all the way at the end you can see that the timer has taken 768 milliseconds. This is how you can measure how much time a function is taking. And that's it. If you like the video, consider subscribing us to receive more engaging content about JavaScript every single week. See you next time.