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

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>
<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();
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);
};

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.