Measuring boot time through api performance

Question

I listened to Steve Sowder’s conversation a few days ago, and he mentioned the new performance specification introduced by new browsers, and it was pretty intriguing. In his speech, he mentioned the following example as a means of measuring perceived page load time:

var timing = performance.timing; var loadtime = timing.loadEventEnd - timing.navigationStart; alert("Perceived time:"+loadtime); 

This is clearly a basic example, but when I try to use it in my development environment, I get crazy numbers, like -1238981729837, for example, because loadEventEnd is <0.

Obviously, something is wrong, and there are many improvements that can be made in this example to provide more information and improve reliability. (I know that this is only implemented in a few browsers).

So, what are some guidelines for using this api to track page load time through Javascript to analyze the performance of my site?

Answer 1

I had no problems with this, but I did not try to measure the performance on the local computer - it works fine on the website. It is interesting to look at other sites to compare your numbers with something.

for example, these are good numbers for page size and their resources -

 http://stackoverflow.com/questions/7606972/measuring-site-load-times- Friday, September 30, 2011 4:03:52 AM // (timestamp:1317369511747) navigationStart= 0 milliseconds elapsed // fetchStart= 0 domainLookupStart= 0 domainLookupEnd= 0 requestStart= 0 // responseStart= 359 responseEnd= 359 domLoading= 359 // unloadEventStart= 375 unloadEventEnd= 375 // domInteractive= 515 domContentLoadedEventStart= 515 // domContentLoadedEventEnd= 531 // domComplete= 2496 loadEventStart= 2496 // (timestamp:1317369514243) loadEventEnd= 2496 milliseconds elapsed 

---

 http://www.yankeeweb.com/webshop.html Friday, September 30, 2011 4:22:25 AM // (timestamp:1317370911738) navigationStart= 0 milliseconds elapsed // fetchStart= 0 domainLookupStart= 0 // domainLookupEnd= 281 connectStart= 281 // connectEnd= 296 requestStart= 296 // responseStart= 546 // responseEnd= 562 domLoading= 562 // domInteractive= 1264 domContentLoadedEventStart= 1264 domContentLoadedEventEnd= 1264 // domComplete= 1622 loadEventStart= 1622 // (timestamp:1317370913360) loadEventEnd= 1622 milliseconds elapsed 

What you really need is the numbers that people get when they visit your site - you can include it in the form or newsletter form (starting with firefox 7 and chrome, for now).

// run the code in firefox notepad:

 (function(){ if(!window.performance || !performance.timing) return; var timestamp, first, hstr, L, ptA= ['navigationStart', 'unloadEventStart', 'unloadEventEnd', 'redirectStart', 'redirectEnd', 'fetchStart', 'domainLookupStart', 'domainLookupEnd', 'connectStart', 'connectEnd', 'secureConnectionStart', 'requestStart', 'responseStart', 'responseEnd', 'domLoading', 'domInteractive', 'domContentLoadedEventStart', 'domContentLoadedEventEnd', 'domComplete', 'loadEventStart', 'loadEventEnd'].map(function(itm){ timestamp= performance.timing[itm]; if(isFinite(timestamp) && timestamp!== 0){ if(!first) first= timestamp; return [itm, timestamp, timestamp-first]; } else return [1, NaN]; }).filter(function(itm){ return !isNaN(itm[1]); }); ptA= ptA.sort(function(a, b){ return a[1]-b[1]; }); if(report=== 1) return ptA; L= ptA.length-1; ptA= ptA.map(function(itm, i){ if(i> 0 && ptA[i-1][2]!== itm[2]) itm[0]= '//\n'+itm[0]; if(i=== 0 || i=== L){ itm[0]= '//\n(timestamp:'+itm[1]+ ')\n'+itm[0]; itm[2]+= ' milliseconds elapsed \n'; } return itm[0]+'= '+itm[2]; }); hstr= '\n'+location.href+'\n'+ new Date().toLocaleString()+'\n'; return hstr+ptA.join('\n'); })() 

Answer 2

You need to measure loadEventEnd after the onload event completes, otherwise it will be reported as 0, as never before. (jquery example to bind to onload event)

 $(window).load(function(){ setTimeout(function(){ window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {}; var timing = performance.timing || {}; var parseTime = timing.loadEventEnd - timing.responseEnd; console.log('Parsetime: ', parseTime); }, 0); }); 

Answer 3

Good answer from Ionut Popa.

crazy numbers like -1238981729837 as an answer since loadEventEnd is <0

loadEventEnd is not less than zero, it is equal to zero.

As a temporary spec navigation mode, it states: “This attribute shall return the completion time of the load event of the current document. It shall return zero when the load event does not start or is not completed.

Therefore, timing.loadEventEnd - timing.navigationStart will be negative.

FWIW, here is a non-jQuery version:

 window.onload = function(){ setTimeout(function(){ var t = performance.timing; console.log(t.loadEventEnd - t.responseEnd); }, 0); }