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.