I am using the new webTiming API exposed through Chrome and IE 9 specified in the new W3C spec.
For some reason I am getting the loadEventEnd
as 0
. This is restricting me from calculating the real load time.
Here’s the output and code
connectStart is: 1308411426685
responseStart is: 1308411429541
domLoading is: 1308411429548
connectEnd is: 1308411426685
domInteractive is: 1308411430023
fetchStart is: 1308411426667
secureConnectionStart is: 0
domainLookupStart is: 1308411426667
responseEnd is: 1308411429543
requestStart is: 1308411426685
loadEventEnd is: 0
domComplete is: 0
redirectStart is: 0
unloadEventEnd is: 1308411429545
domContentLoadedEventStart is: 1308411430023
domContentLoadedEventEnd is: 0
domainLookupEnd is: 1308411426667
navigationStart is: 1308411426667
unloadEventStart is: 1308411429545
loadEventStart is: 0
redirectEnd is: 0
Code:
var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = performance.timing || {};
function getTiming(timingStr) {
if (!timing) return 0;
var time = timing[timingStr];
return time;
}
var loadTime = (new Date().getTime() - getTiming("navigationStart"))/1000;
$(document).ready(function(){
var perflist = '<ul id=perflist>';
for(var performer in timing){
var j = getTiming(performer);
perflist += '<li>' + performer + ' is: ' + j + '</li>';
}
perflist += '</ul>';
$("body").prepend(perflist);
$("#adminmenu").prepend("<li>Load time : " + loadTime + " seconds</li>");
Can someone help me figure out what’s wrong?
If you look at the source code in http://webtimingdemo.appspot.com/ it runs the code AFTER onload (setTimeout('writeTimings()', 0)), your code runs in $(document).ready() which runs before onload as it runs on DOMContentLoaded in Chrome.
I have put a setTimeout into your code and now it works: See http://jsbin.com/acabo4/8
var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = performance.timing || {};
function getTiming(timingStr) {
if (!timing) return 0;
var time = timing[timingStr];
return time;
}
var loadTime = (new Date().getTime() - getTiming("navigationStart"))/1000;
$(document).ready(function() {
setTimeout(function(){
var perflist = '<ul id=perflist>';
for(var performer in timing){
var j = getTiming(performer);
perflist += '<li>' + performer + ' is: ' + j + '</li>';
}
perflist += '</ul>';
$("body").prepend(perflist);
$("#adminmenu").prepend("<li>Load time : " + loadTime + " seconds</li>")
}, 100);
});