Page Load Time in TypeScript

Introduction

In this article, I explain how to count page load time using TypeScript.

Use the following procedure.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "Page_load_Time" and then click "Ok".

application-name.jpg

Step 2

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css file and aspx page.

 solution-explorer.jpg

Program Coding

Load_Time.ts

class Page_Load_Time

{

    Load_Time(beforeload)

    {

       

        var beload = beforeload;

            var aftrload = new Date().getTime();

            // Time calculating in seconds

            var loadtime = (aftrload - beload) / 1000;

            var span = document.createElement("span");

            span.style.fontSize = "large";

            span.innerHTML = "You page load time is <font color='red'><b> " + loadtime + "</b></font> Second \n";

            document.body.appendChild(span);

    }

}

var beforeload = new Date().getTime();

window.onload = () =>

    var obj = new Page_Load_Time();

    obj.Load_Time(beforeload);

};

 

default.htm

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>TypeScript HTML App</title>

    <link rel="stylesheet" href="app.css" type="text/css" />

    <script src="Load_Time.js"></script>

</head>

<body>

    <h2 style="color: #0000FF">Count Page Load Time in TypeScript</h2>

 

    <div id="content">

    </div>

</body>

</html>

  

Load_Time.js

 

var Page_Load_Time = (function () {

    function Page_Load_Time() { }

    Page_Load_Time.prototype.Load_Time = function (beforeload) {

        var beload = beforeload;

        var aftrload = new Date().getTime();

        // Time calculating in seconds

        var loadtime = (aftrload - beload) / 1000;

        var span = document.createElement("span");

        span.style.fontSize = "large";

        span.innerHTML = "You page load time is <font color='red'><b> " + loadtime + "</b></font> Second \n";

        document.body.appendChild(span);

    };

    return Page_Load_Time;

})();

var beforeload = new Date().getTime();

window.onload = function () {

    var obj = new Page_Load_Time();

    obj.Load_Time(beforeload);

};

//@ sourceMappingURL=Load_Time.js.map

 

Output


output1.jpg


Refresh or Reload the page; you will see that the page load time has changed.


output2.jpg

 

Again refresh the page.


output3.jpg



For more information, download the attached sample application.