![\"\"](\"https:\/\/blog.iordanov.info\/wp-content\/uploads\/2012\/01\/mvc-4-i.png\" "\\"")
<\/a>This post is intended to show a very simple and comfortable way to monitor web page generation and load time in your web application. It uses a java script and a IHttpModule implementation in MVC 3 .Net environment.<\/p>\nThe measurements are divided in 2\u00a0: Page Load and Page Generation time.<\/p>\n
Page Load Time<\/h3>\n
Let\u2019s make a short definition of Page Load Time. This is a time showing how long it takes for a page to load. A timer starts when the page begins to parse and ends when it has completed loading all of the content. The measurement of this time is a suitable task for java script implementation. Some examples can be found in Loading Time[1]<\/sup>\u00a0and Indicator JavaScript Web Page Load Time[2]<\/sup>\u00a0web publications. Both are based on using\u00a0JavaScript Timing Events<\/a>.<\/p>\n “Page Generation Time” measure how long it took for a page to be generated by the server. Some short and working examples how to do this in .Net MVC environment can be found in stackoverflow[3]<\/sup>\u00a0and Pro ASP.NET MVC Framework by Steven Sanderson – Chapter 15 – Performance, Monitoring Page Generation Times[4]<\/sup>.<\/p>\n Put in a java script file the folloing variables and functions:<\/p>\n <\/a><\/p>\n <\/a><\/p>\n <\/a><\/p>\n <\/a><\/p>\n <\/a><\/p>\n <\/a><\/p>\n Create and Register a Custom HTTP Module –\u00a0PerformanceMonitorModule<\/em>. The similar modul is described in Pro ASP.NET MVC Framework by Steven Sanderson – Chapter 15 – Performance, Monitoring Page Generation Times[4]<\/sup>\u00a0and some help reference can be found in in\u00a0MSDN Library<\/a>.<\/p>\n PerformanceMonitorModule Registration in Web.Config:<\/p>\n <\/a><\/p>\n In partial views used for AJAX request put the following in the beginning of the page:<\/p>\n <\/a><\/p>\n In my implementation I am using the following css that shows time values under main menu on the page.<\/p>\n <\/a><\/p>\n Page Load Time<\/strong>\u00a0is measured using\u00a0timing event<\/a><\/em>. When page is loded the variable\u00a0startTime<\/em>\u00a0is set to current time [2.2]. Ondocument.ready<\/em>\u00a0event the call to\u00a0pageloadDoTimer<\/em>\u00a0java script function initiate timer\u00a0loopTime<\/em>. This timer executes a loop call topageloadTimerCount<\/em>\u00a0function on every 100 ms. The timer loop is canseled by calling\u00a0pageloadStopTimer<\/em>\u00a0function. This call is added to alltext\/html<\/strong>\u00a0or\u00a0application\/json<\/strong>\u00a0request by\u00a0PerformanceMonitorModule<\/em>. Time difference betwin\u00a0startTime<\/em>\u00a0and current time is ‘Page Load Time<\/em>. The following is used to display this value:<\/p>\n Page Generation Time<\/strong>\u00a0is measured using .NET\u2019s built-in high-resolution timer class,\u00a0System.Diagnostics.Stopwatc<\/em>\u00a0in custom HTTP module (PerformanceMonitorModule<\/em>). It appends performance statistics to the bottom of each page generated as a java script variablepageGenerationTime<\/em>. When the\u00a0pageloadStopTimer<\/em>\u00a0function is called\u00a0pageGenerationTime<\/em>\u00a0value is placed in the corresponding place:<\/p>\n <\/p>\n It seems that many post concern .Net development hints do not care about the reader. That\u2019s I decided to write this blog collecting information from difference places and putting together. There are some additional helpful things from me\u2026 This post …<\/p>\nPage Generation Time<\/h3>\n
My Implementation<\/h3>\n
<\/a>In the following example I made some additions to the above pointed examples to allow page generation and page load times measurement in case of AJAX request.<\/p>\n1 Java Script<\/h4>\n
\/***************************** TIMER Page Load *******************************\/\r\n var loopTime;\r\n var startTime = new Date();\r\n var pageGenerationTime = \"0.0\";\r\n\r\n function pageloadTimerCount() {\r\n loopTime = setTimeout(\"pageloadTimerCount()\", 100);\r\n }\r\n\r\n function pageloadDoTimer() {\r\n pageloadTimerCount();\r\n }\r\n\r\n function pageloadStopTimer() {\r\n var timeMs = Math.floor((new Date() - startTime)); \r\n\r\n $('#loadtime').html(\"\" + timeMs );\r\n $('#generatetime').html(pageGenerationTime);\r\n $('#pagetime').show();\r\n\r\n clearTimeout(loopTime);\r\n }<\/pre>\n2 _Layout.cshtml<\/h4>\n
2.1 Include Reference of the above JS file<\/h5>\n
2.2 In the beginning oh HEAD tag include\u00a0startTime<\/em>\u00a0initialization:<\/h5>\n
<head>\r\n <script type=\"text\/javascript\">\r\n var startTime = new Date();\r\n <\/script>\r\n .....\r\n <\/head><\/pre>\n
2.3 In Page\u00a0body<\/strong>\u00a0tag include a similar\u00a0DIV<\/strong>\u00a0like this one:<\/h5>\n
<div id=\"pagetime\" style=\"display:none;\">\r\n Page Generation: <span id=\"generatetime\">0.0<\/span> Page Load: <span id=\"loadtime\">0.0<\/span> ms.\r\n <\/div><\/pre>\n
2.4 In the end of page include:<\/h5>\n
<script type=\"text\/javascript\">\r\n $(document).ready(function () {pageloadDoTimer();});\r\n <\/script><\/pre>\n3 Performance Monitor Module<\/h4>\n
using System;\r\n using System.Collections.Generic;\r\n using System.Linq;\r\n using System.Web;\r\n using System.Diagnostics;\r\n\r\n namespace Website.Module\r\n {\r\n public class PerformanceMonitorModule\u00a0: IHttpModule\r\n {\r\n public void Dispose() { \/* Nothing to do *\/ }\r\n public void Init(HttpApplication context)\r\n {\r\n context.PreRequestHandlerExecute += delegate(object sender, EventArgs e)\r\n {\r\n HttpContext requestContext = ((HttpApplication)sender).Context;\r\n Stopwatch timer = new Stopwatch();\r\n requestContext.Items[\"Timer\"] = timer;\r\n timer.Start();\r\n };\r\n context.PostRequestHandlerExecute += delegate(object sender, EventArgs e)\r\n {\r\n HttpContext requestContext = ((HttpApplication)sender).Context;\r\n\r\n Stopwatch timer = (Stopwatch)requestContext.Items[\"Timer\"];\r\n timer.Stop();\r\n \/\/ Don't interfere with non-HTML responses \r\n\r\n if (requestContext.Response.ContentType == \"text\/html\" ||\r\n requestContext.Response.ContentType == \"application\/json\")\r\n {\r\n\r\n Uri requestUrl = requestContext.Request.Url;\r\n double ms = (double)timer.ElapsedMilliseconds;\r\n string result = string.Format(\"{0:F0} ms.\", ms);\r\n\r\n requestContext.Response.Write(\r\n \"<script type=\\\"text\/javascript\\\">\r\n var pageGenerationTime = '\" + result + \"';\r\n pageloadStopTimer();\r\n <\/script>\");\r\n\r\n }\r\n };\r\n }\r\n }\r\n }<\/pre>\n <configuration>\r\n ...\r\n <system.web>\r\n ...\r\n <httpModules>\r\n <add name=\"PerfModule\" type=\"Website.Module.PerformanceMonitorModule, Reports.Website\"\/>\r\n <\/httpModules>\r\n ...\r\n <\/system.web>\r\n ...\r\n <\/configuration><\/pre>\n
4 Partial Views<\/h4>\n
<script type=\"text\/javascript\">\r\n var startTime = new Date();\r\n <\/script><\/pre>\n
5 CSS<\/h4>\n
#pagetime\r\n {\r\n position: absolute;\r\n width: 325px;\r\n left: 55%;\r\n margin: -22px auto 2px auto;\r\n z-index:6;\r\n padding: 2px;\r\n color: #F47511;\r\n text-align:center;\r\n font-size:x-small;\r\n font-style:italic;\r\n }<\/pre>\nShort Explanation<\/h3>\n
<\/a><\/p>\n var timeMs = Math.floor((new Date() - startTime));\r\n $('#loadtime').html(\"\" + timeMs );<\/pre>\n $('#generatetime').html(pageGenerationTime);<\/pre>\nReferences<\/h3>\n
\n