Page Load Time in TypeScript

Nitin Bhardwaj
12y
14k
0
0

100

Article

Page_load_Time.rar

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".

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.

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>

<head>

<title>TypeScript HTML App</title>

</head>

<body>

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

</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

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

Again refresh the page.

For more information, download the attached sample application.