Calculate time taking by a function using javscript

Calculate time taking by a function using javscript

06-Oct-2022
| |
Image Carousel

Sometimes we need to calculate the complexity of time during the loading of a page or wants to calculate the execution time , so here we done it by usng javascript.

Here is the main function Copy 

<script>
     const startTime = performance.now();
    const endTime = performance.now();
    console.log("start = "+startTime);
    console.log("end = "+endTime);
    const totalTime = endTime - startTime;
 
    console.log("Total Time " + totalTime + " in milliseconds");
</script>

 

So if you want to calculate the total loading time of page like how much time a page takes to load then use this Copy

<script>
    const startTime = performance.now();
</script>
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculate Performance</title>
       <!-- CSS only -->
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css">
 
    <!-- Js -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
</head>
 
<body>
<div class="container">
        <h2>Registration form</h2>
        <form id="formSubmit">
            @csrf
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required value="[email protected]">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" name="password" class="form-control pwd" id="exampleInputPassword1" placeholder="Password" required value="123456">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword2">Confirm Password</label>
                <input type="password" name="confimrpassword" class="form-control pwd" id="exampleInputPassword2" placeholder="Conirm Password" required value="123456">
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="togglepassword()">
                <label class="form-check-label" for="exampleCheck1">Show Password</label>
            </div>
 
            <div class="form-group">
                <label for="exampleInputPassword2">Name</label>
                <input type="text" name="name" class="form-control" id="name" placeholder="Enter Name" required value="abcd">
            </div>
 
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
 
</html>
<script>
    const endTime = performance.now();
    console.log("start = "+startTime);
    console.log("end = "+endTime);
    const totalTime = endTime - startTime;
 
    console.log("Total Time " + totalTime + " in milliseconds");
</script>

So here we are using simple registration tempplete to check how much time it will take to load  in cosole it shows  

But if you want to check the total time execution of function tehn use this Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
 
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css">
 
    <!-- Js -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
</head>
 
<body>
 
    <div class="container">
        <h2>Registration form</h2>
        <form id="formSubmit">
            @csrf
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required value="[email protected]">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" name="password" class="form-control pwd" id="exampleInputPassword1" placeholder="Password" required value="123456">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword2">Confirm Password</label>
                <input type="password" name="password_confirmation" class="form-control pwd" id="exampleInputPassword2" placeholder="Conirm Password" required value="123456">
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="togglepassword()">
                <label class="form-check-label" for="exampleCheck1">Show Password</label>
            </div>
 
            <div class="form-group">
                <label for="exampleInputPassword2">Name</label>
                <input type="text" name="name" class="form-control" id="name" placeholder="Enter Name" required value="developer">
            </div>
 
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
 
</html>
<script src="https://vm-services.tech/developerCorner/parsley/parsley.min.js"></script>
<script>
   
    $("#formSubmit").submit(function(e) {
 
        const startTime = performance.now();
 
        e.preventDefault()
        if ($(this).parsley().validate()) {
            var url = "{{ url('registration_process') }}";
           
            $.ajax({
                url: url,
                data: $('#formSubmit').serialize(),
                type: 'post',
                success: function(result) {
                    if (result.status == 200) {
                       console.log("Sumbit Successfully");
                    } else {
                        console.log(result);
                    }
 
                    const endTime   = performance.now();
                    const total = endTime - startTime ;
 
                 console.log("Total Time "+ total +" in milliseconds");
                }
            });
        }
 
    });
 
 
 
    function togglepassword() {
        var x = document.getElementsByClassName("pwd");
        $.each(x, function(key, val) {
            if (val.type === "password") {
                val.type = "text";
            } else {
                val.type = "password";
            }
        })
 
    }
</script>

 

So here we are submitting a form using ajax request and check how much time it takes in console.

Tags: check performance of a function usng javascript , calculate time taking by a function using javscript , how to calculate time in page loading usnig javascript,JavaScript,
Related Articles
Load More

Newsletter