javascript - Measure page download time and render time with page subelements -

i required measure page load times every visitor. think best way injecting javascript in page purpose. things little bit complex because need every subrequest in page time measured seperately. reponse times requests going 3rd party systems cdn or google need reported also. page has many ajax calls executed during page load. these should included , after page done event other periodic ajax calls should not included. , @ , these measurements should sent server storing (?xmlhttprequest) . has done such thing before ? recommendations or sample scripts ?

thanks

edit: while start, doesn't solve fact content asynchronously loaded. don't know how measure loading time images example. can used in ajax calls however.

here's way it. http://jsfiddle.net/45lpwhyv/

function loadingtimer() {     this.timestamp = null;     this.parts = []; }  loadingtimer.prototype.start = function (data) {     this.stop();     var = this.parts.length;     this.parts[i] = {};     this.parts[i].data = data;     this.timestamp = new date().gettime();; };  loadingtimer.prototype.stop = function () {     if (this.timestamp !== null) {         this.parts[this.parts.length - 1].duration = (new date().gettime()) - this.timestamp;         this.timestamp = null;     } }; 

this class allows pass data parameter timer, can string name of current part of document gets loaded. need create instance of loadingtimer , call .start("sectionname") each action want keep track of. if want stop section without starting new 1 immediately, call .stop.

lt = new loadingtimer(); lt.start("time before first dialog gets closed."); alert("time checked when close dialog."); lt.start("time before second dialog gets closed."); alert("let's one!"); lt.stop(); 

obviously add methods transmit data server @ point, in json.