Custom JavaScript Performance Testing Script

js-perf-api-tests

// Custom JavaScript Performance Testing Script
// *** HOUSEKEEPING! Performance Review ***
// Master File: Maintained by Primitive Digital's Housekeeping Department
// https://primitivedigital.uk/housekeeping-department/

// This utilises the native 
// https://developer.mozilla.org/en-US/docs/Web/API/Performance

// This can be saved to an external JS file and placed in the library
// this will allow the performance tests to be toggled on/off based on a fied value

// This is a demo function,
// to test/moitor the individual performance of a function set a 'mark' before and after calling the function
// e.g.
// note the present time into "mark1" identifier.
// performance.mark("mark1");
// 
// add();
//
//note the present time into "mark2" identifier.
performance.mark("mark2");
function add() {
	//  demo testing - high definition user timings - set marks before and after functions to time
    for(var i = 0; i < 1000000; i++)
    {
        //some overhead        
    }
    return 12 + 89;
}

function calculate_load_times() {
  // Check performance support
  if (performance === undefined) {
    console.log("= Calculate Load Times: performance NOT supported");
    return;
  }

  // Get a list of "resource" performance entries
  var resources = performance.getEntriesByType("resource");
  if (resources === undefined || resources.length <= 0) {
    console.log("= Calculate Load Times: there are NO `resource` performance records");
    return;
  }

  console.log("= Calculate Load Times");
  
  for (var i=0; i < resources.length; i++) {
    console.log("== Resource[" + i + "] - " + resources[i].name);
    // Redirect time
    var t = resources[i].redirectEnd - resources[i].redirectStart;
    console.log("... Redirect time = " + t);

    // DNS time
    t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
    console.log("... DNS lookup time = " + t);

    // TCP handshake time
    t = resources[i].connectEnd - resources[i].connectStart;
    console.log("... TCP time = " + t);

    // Secure connection time
    t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
    console.log("... Secure connection time = " + t);

    // Response time
    t = resources[i].responseEnd - resources[i].responseStart;
    console.log("... Response time = " + t);

    // Fetch until response end
    t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
    console.log("... Fetch until response end time = " + t);

    // Request start until reponse end
    t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
    console.log("... Request start until response end time = " + t);

    // Start until reponse end
    t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
    console.log("... Start until response end time = " + t);
  }
}
function append ( elString, parent ) {
	var div = document.createElement( "div" );
	div.innerHTML = elString;
	//document.querySelector( parent || "body" ).appendChild( div.firstChild );
	document.body.appendChild(div.firstChild); 
	document.getElementById(parent).appendChild(div.firstChild);
}

window.onload = function(){

  // On Page Load
  
  // use this to run based on a variable
  // var toggePerformance = document.getElementById("hlpPerformance");
  // document.getElementById("hlpPerformance").toLowerCase();
  var toggePerformance = "ON";
  
  if (toggePerformance !== null && toggePerformance.value == "ON" || toggePerformance === null) {
	  
		var debugBlock = '   		<div id="sk-perf-div" style="margin-bottom: 1em; padding:.6em; border: 1px solid orange;">			  '  + 
		 '   			<div id="user_agent" style="font-style:italic; color:grey;"></div>  '  + 
		 '     '  + 
		 '   			<div id="result1" style="font-weight:bold;"></div>  '  + 
		 '   			<div id="heap_size_limit"></div>  '  + 
		 '   			<div id="total_heap_size"></div>  '  + 
		 '   			<div id="used_heap_size"></div>  '  + 
		 '     '  + 
		 '   			<div id="result2" style="font-weight:bold;"></div>  '  + 
		 '   			<div id="total_download_time"></div>  '  + 
		 '   			<div id="total_render_time"></div>  '  + 
		 '     '  + 
		 '   			<div id="result3" style="font-weight:bold;"></div>  '  + 
		 '   			<div id="page_visit_type"></div>  '  + 
		 '   			<div id="redirections_occured"></div>  '  + 
		 '     '  + 
		 '   			<div id="result4" style="font-weight:bold;"></div>  '  + 
		 '   			<div id="time_taken"></div>  '  + 
		 '     '  + 
		 '   			<div id="result5" style="font-weight:bold;"></div>  '  + 
		 '     '  + 
		 '  		</div>  ' ; 
		 
	    // Append debug block to parentEle
		var parentEle = "mcPage_001";
		//parentEle = document.getElementById(parentEle);
		append( debugBlock, parentEle );
  
	  // log user agent
	  document.getElementById('user_agent').innerHTML = "User Agent: " + navigator.userAgent;

	  // Memory Profiling API(performance.memory)
	  // Page Timing API(performance.timing)
	  // Page Navigation API(performance.navigation)
	  // High Resolution Time API(performance.now())
	  // User Timing API

		if("performance" in window) {
		
			if("memory" in window.performance) {
				document.getElementById("result1").innerHTML = "Page Performance API and Memory Profiling API is supported";
				document.getElementById("heap_size_limit").innerHTML = "Heap size limit: " + window.performance.memory.jsHeapSizeLimit + " bytes";
				document.getElementById("total_heap_size").innerHTML = "Total heap size of this page: " + window.performance.memory.totalJSHeapSize + " bytes";
				document.getElementById("used_heap_size").innerHTML = "Used heap size: " + window.performance.memory.usedJSHeapSize + " bytes";
			}
			else {
				document.getElementById("result1").innerHTML = "Memory Profiling API is not supported by this browser";  
			}
			if("timing" in window.performance) {
				 document.getElementById("result2").innerHTML = "Page Timing API supported";
				 document.getElementById("total_download_time").innerHTML = "Total  time taken to download the webpage from server is : " + (window.performance.timing.responseEnd - window.performance.timing.navigationStart) + " milliseconds";
				document.getElementById("total_render_time").innerHTML = "Total  time taken to render the webpage  is : " + (window.performance.timing.loadEventStart - window.performance.timing.domLoading) + " milliseconds";
			}
			else {
				 document.getElementById("result2").innerHTML = "Page Timing API not supported";
			}
			
			
			if("navigation" in window.performance) {
				document.getElementById("result3").innerHTML = "Page Navigation API supported";
				
				var type = window.performance.navigation.type;
				
				if(type === 0) {
					document.getElementById("page_visit_type").innerHTML = "User typed URL or clicked a link or submitted a form or script redirect";
				}
				else if(type === 1) {
					document.getElementById("page_visit_type").innerHTML = "User refreshed the page";
				}
				else if(type === 2) {
					document.getElementById("page_visit_type").innerHTML = "User navigated to this page using back or forward button";
				}
				else if(type === 255) {
					document.getElementById("page_visit_type").innerHTML = "Don't know how user landed on this page.";
				}
				
				document.getElementById("redirections_occured").innerHTML = "Number of redirections occured to land on this page is: " + performance.navigation.redirectCount;
			}
			else {
				 document.getElementById("result3").innerHTML = "Page Navigation API not supported";
			}
			
			
			if("now" in window.performance || "mozNow" in window.performance || "msNow" in window.performance || "oNow" in window.performance || "webkitNow" in window.performance)
			{
				document.getElementById("result4").innerHTML = "High Resolution Time API supported";
				
				var start_time = performance.now() || performance.mozNow() || performance.msNow() || performance.oNow() || performance.webkitNow();
				calculate_load_times();
				var end_time = performance.now() || performance.mozNow() || performance.msNow() || performance.oNow() || performance.webkitNow();
				
				document.getElementById("time_taken").innerHTML = "Time taken to calculate resource loading  : " + (end_time - start_time);
			}
			else {
				 document.getElementById("result4").innerHTML = "High Resolution Time API not supported";
			}
			
			
			if("mark" in window.performance) {
				document.getElementById("result5").innerHTML = "User Timing API is supported. Check JS console for results of user timing API";
				
				//note the present time into "mark1" identifier.
				performance.mark("mark1");
				
				add();
				
				//note the present time into "mark2" identifier.
				performance.mark("mark2");
				
				add();
				
				//note the present time into "mark3" identifier.
				performance.mark("mark3");
				
				add();
				
				//note the present time into "mark4" identifier.
				performance.mark("mark4");
				
				//now calculate the difference between the notes time and stored in identifier "measure1", "measure2" and "measure3"
				performance.measure("measure1", "mark1", "mark2");
				performance.measure("measure2", "mark2", "mark3");
				performance.measure("measure3", "mark3", "mark4");
				
				//"mark" identifies all marks
				var performanceMarks = performance.getEntriesByType("mark");
				var info = '';
				for (i = 0; i < performanceMarks.length; i++) {
					info = "Name: " + performanceMarks[i].name + " - " + "Start Time: " + performanceMarks[i].startTime + "";
					console.log(info);
				}
				
				//"measure" identifies all measures
				var performanceMeasure = performance.getEntriesByType("measure");
				var info2 = '';
				for (i = 0; i < performanceMeasure.length; i++) {
					//duration represents the time between two marks
					info2 = "Name: " + performanceMeasure[i].name + " - " + "Duration Time: " + performanceMeasure[i].duration + "";
					console.log(info);
				}
				
				
				
				//delete mark1 identifier
				performance.clearMarks("mark1");
				//delete all marks
				performance.clearMarks();
				
				// clear specific performance measurements
				performance.clearMeasures("measure1");
				// clear all previous performance measures
				performance.clearMeasures();
			}
			else
			{
				 document.getElementById("result5").innerHTML = "User Timing API not supported";
			}
		};
		else { document.getElementById("result1").innerHTML = "Page Performance API is not supported"; }
	}
}