Post
Ask Question

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
  1. class Page_Load_Time  
  2. {  
  3.  Load_Time(beforeload)  
  4.  {  
  5.   var beload = beforeload;  
  6.   var aftrload = new Date().getTime();  
  7.   // Time calculating in seconds  
  8.   var loadtime = (aftrload - beload) / 1000;  
  9.   var span = document.createElement("span");  
  10.   span.style.fontSize = "large";  
  11.   span.innerHTML = "You page load time is <font color='red'><b> " + loadtime + "</b></font> Second \n";  
  12.   document.body.appendChild(span);  
  13.  }  
  14. }  
  15. var beforeload = new Date().getTime();  
  16. window.onload = () =>  
  17.  {  
  18.   var obj = new Page_Load_Time();  
  19.   obj.Load_Time(beforeload);  
  20.  };  
default.htm
  1. <!DOCTYPE html>  
  2. <html lang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title>TypeScript HTML App</title>  
  7.         <link rel="stylesheet" href="app.css" type="text/css" />  
  8.         <script src="Load_Time.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <h2 style="color: #0000FF">Count Page Load Time in TypeScript</h2>  
  12.         <div id="content"></div>  
  13.     </body>  
  14. </html>  
Load_Time.js
  1. var Page_Load_Time = (function() {  
  2.  function Page_Load_Time() {}  
  3.  Page_Load_Time.prototype.Load_Time = function(beforeload) {  
  4.   var beload = beforeload;  
  5.   var aftrload = new Date().getTime();  
  6.   var loadtime = (aftrload - beload) / 1000;  
  7.   var span = document.createElement("span");  
  8.   span.style.fontSize = "large";  
  9.   span.innerHTML = "You page load time is <font color='red'><b> " + loadtime + "</b></font> Second \n";  
  10.   document.body.appendChild(span);  
  11.  };  
  12.  return Page_Load_Time;  
  13. })();  
  14. var beforeload = new Date().getTime();  
  15. window.onload = function() {  
  16.  var obj = new Page_Load_Time();  
  17.  obj.Load_Time(beforeload);  
  18. };  
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.


Similar Articles