timing script

perf-timing

function listTimingInfo (){

	var timing = window.performance.timing;
	var url = document.location.href;
	
	
	var navigationStart = timing.navigationStart;
	var loadEnd = timing.loadEventEnd;
	
	var totalLoadTime = loadEnd - navigationStart;
	
	var msWidth = 300.0/ totalLoadTime; 
    
	addInfo (url + ' loaded in ' + totalLoadTime + ' ms');
	
	var redirectTime = (timing.redirectEnd - navigationStart);
	if (redirectTime < 0.0) redirectTime = 0;
	
	var appCacheTime = (timing.domainLookupStart - timing.fetchStart);
	if (appCacheTime < 0.0) appCacheTime = 0;
	
	var requestTime = (timing.responseStart - timing.requestStart);
	if (requestTime < 0.0) requestTime = 0;
	
	var dnsTime = (timing.domainLookupEnd - timing.domainLookupStart);
	if (dnsTime < 0.0) dnsTime = 0;
	
	var tcpTime = (timing.connectEnd - timing.connectStart);
	if (tcpTime < 0.0) tcpTime = 0;
	
	var responseTime = (timing.responseEnd - timing.responseStart);
    if (responseTime <0.0) responseTime = 0;
    
    var processingTime = (timing.loadEventStart - timing.responseEnd);
    if (processingTime < 0.0) processingTime = 0;
    
    var onLoadTime = (timing.loadEventEnd - timing.loadEventStart);
    if (onLoadTime < 0.0) onLoadTime = 0;
	
	// debug
	
	var offset = 0;
	
	setPerfDataElement ('redirect', offset, msWidth * redirectTime, redirectTime);
	offset += msWidth * redirectTime;
	setPerfDataElement ('appCache', offset, msWidth * appCacheTime, appCacheTime);
	offset += msWidth * appCacheTime;
	setPerfDataElement ('dns', offset, msWidth * dnsTime, dnsTime);
	offset += msWidth * dnsTime;
	setPerfDataElement ('tcp', offset, msWidth * tcpTime, tcpTime);
	offset += msWidth * tcpTime;
	setPerfDataElement ('request', offset, msWidth * requestTime, requestTime);
	offset += msWidth * requestTime;
	setPerfDataElement ('response', offset, msWidth * responseTime, responseTime);	
	offset += msWidth * responseTime;
	setPerfDataElement ('processing', offset, msWidth * processingTime, processingTime);
	offset += msWidth * processingTime;
	setPerfDataElement ('onLoad', offset, msWidth * onLoadTime, onLoadTime);	
}

function addInfo (info){
  
  var elem = document.createElement('p');
  elem.style.cssText = 'margin:0px;';
  elem.innerHTML = info;
  document.getElementById("urldiv").appendChild(elem); 
	
}

function setPerfDataElement (name, offset, width, value){
	
	var elem = document.getElementById(name);
	if (value <= 0.0) {
	  value = 0;
	}
	else {
	  if (width < 3){
		width = 3;  
	  }	
	}
	elem.style.width = width + 'px';
    elem.style.marginLeft = offset + 'px';
	elem.title = name + ': ' + value + ' ms';
	
}


function gatherPerfData () {

// document.getElementById("perfData").innerHTML = 'Testing';
var timingAvailable = false;

timingAvailable = window.performance != null;

if (timingAvailable){
	// document.getElementById("perfData").innerHTML = '';
	listTimingInfo ();
}	
else
	document.getElementById("perfData").innerHTML = '<b>No</b> Web Timing API available';
}

function closePerfWindow (){
	
	var perfDiv = document.getElementById("perfDataDiv");
	document.body.removeChild(perfDiv);
	
}


(function createPerfDataView (){
	
  var divName= "perfDataDiv";
  var perfDiv = document.getElementById (divName);
  if (perfDiv == null){
    perfDiv = document.createElement('div');
  }
  perfDiv.id = divName;
  perfDiv.style.cssText = 'text-align:left;color:grey;clear:both;border: 2px solid #555;position:absolute;top:0px;left:0px;width:400px;height:300px;z-index:99999;margin:0px;padding:0px;';
  var html = 
    '<div id="perfData" style="background:white;font-size:12px;line-height:12px;height:300px;width:100%;margin:0px;padding:0px;" onclick="closePerfWindow();">' +
      '<p style="padding:0px;margin:0px;font-size:15px;">Web Performance powered by dynaTrace</p>' +
      '<div id="urldiv"></div>' +
      '<p style="padding:0px;margin:0px;font-size:15px;">Page Timing</p>' +
      '<div id="timingDiv" style="width:400px;height:150px;position:relative;">'+
          '<div style="width:400px;">'+ 
            '<div style="width:80px;float:left;">Redirect</div>' +
            '<div id="redirect" style="background:#F0FFFF;height:14px;width:45px;float:left;" title="Redirect"></div>'+ 
          '</div>' +      
          '<div style="width:400px;clear:both;">'+ 
            '<div style="width:80px;float:left;">AppCache</div>' +
            '<div id="appCache" style="background:#E0EEEE;height:14px;width:45px;float:left;" title="AppCache"></div>'+ 
          '</div>' +            
          '<div style="width:100%;clear:both;">'+ 
            '<div style="width:80px;float:left;">DNS</div>' +
            '<div id="dns" style="background:#C1CDCD;height:14px;width:45px;float:left;" title="DNS"></div>'+ 
          '</div>' +          
          '<div style="width:100%;clear:both;">'+ 
            '<div style="width:80px;float:left;">TCP</div>' +
            '<div id="tcp" style="background:#75A1D0;height:14px;width:45px;float:left;" title="TCP"></div>'+ 
          '</div>' +             
          '<div style="width:100%;clear:both;">'+ 
            '<div style="width:80px;float:left;">Request</div>' +
            '<div id="request" style="background:#8EE5EE;height:14px;width:45px;float:left;" title="Request"></div>'+ 
          '</div>' + 
          '<div style="width:100%;clear:both;">'+ 
            '<div style="width:80px;float:left;">Response</div>' +
            '<div id="response" style="background:#7AC5CD;height:14px;width:45px;float:left;" title="Response"></div>'+ 
          '</div>' + 
          '<div style="width:100%;clear:both;">'+ 
            '<div style="width:80px;float:left;">Processing</div>' +
            '<div id="processing" style="background:#9BC4E2;height:14px;width:45px;float:left;" title="Processing"></div>'+ 
          '</div>' + 
          '<div style="width:100%;clear:both;">'+ 
            '<div style="width:80px;float:left;">onLoad</div>' +
            '<div id="onLoad" style="background:#50A6C2;height:14px;width:45px;float:left;" title="onLoad"></div>'+ 
          '</div>' + 
      '</div>' +
      '<p style="padding:0px;margin:0px;font-size:10px;display:block;clear:both;">Hover for timing details</p>' +
    '</div>';
  perfDiv.innerHTML = html;
  document.body.appendChild (perfDiv);	
  gatherPerfData ();	
})();