Show Page Loading Time Using JavaScript

Introduction

 
In this article, I explain how to show page load time using JavaScript.
 
Use the following procedure.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Web Site...". A window is opened. In this window, click "Empty Web Site" under Visual C#.
 
application-name.jpg

Give the name of your application as "Page_load_Time" and then click "Ok". Then add the "HTML page" and write the following code.
 
Program Coding
 
PageLoad.htm
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.   
  5.     <title></title>  
  6.  <script type="text/javascript">  
  7.      var before_loadtime = new Date().getTime();  
  8.      window.onload = Pageloadtime;  
  9.      function Pageloadtime() {  
  10.          var aftr_loadtime = new Date().getTime();  
  11.          // Time calculating in seconds  
  12.          pgloadtime = (aftr_loadtime - before_loadtime) / 1000  
  13.   
  14.          document.getElementById("loadtime").innerHTML = "Pgae load time is <font color='red'><b>" + pgloadtime + "</b></font> Seconds";  
  15.      }  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <h3 style="font-weight: bold; font-style: italic; font-size: large; color: #3333CC">Page load time in JavaScript</h3>  
  20. <div>  
  21. <span id="loadtime"></span>  
  22.   
  23. </div>  
  24. </body>  
  25. </html> 
Output


fig11.jpg

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

fig12.jpg

Again refresh or reload the page.

fig13.jpg
 
For more information, download the attached sample application.