performance.timing object
This object stores the info about timing of the various events' that happen during the webpage loading. Its properties'* description can be found below.
NOTE: This is simplified version based on W3C Navigation Timing spec.
navigationStart- The time when load/unload action was triggered which could be also a prompt to unload current document (i.e. enter was hit on url bar, page was refreshed, submit button clicked etc.). If there is no previous document it has the same value as
fetchStart redirectStart- It can be either the start time of redirect (if such is present) or zero
redirectEnd- If redirect is present it stores the time when last byte of the response of last redirect was received. Zero otherwise.
fetchStart- The time just before browser starts doing anything with the request. It's when the actual request starts. Between
fetchStartanddomainLookupStartbrowser checks its cache. domainLookupStart- The moment just before browser checks DNS to resolve domain name. If DNS is not checked for any reason (e.g. the browser cache is used) it has the same value as
fetchStart domainLookupEnd- The time after browser finishes domain lookup. If DNS wasn't checked it has the value of
fetchStart connectStart- Time when browser starts connecting to the server. If resource is fetched from cache (or server is not contacted for any other reason like e.g. persistent connection) it has the same value as
domainLookupEnd connectEnd- Time when browser finishes establishing connection with server. If no connection was made it has the
domainLookupEndvalue. secureConnectionStart- Optional. If page is using HTTPS it's the time just before handshake for secure connection is initiated.
undefinedotherwise. requestStart- The moment just before browser starts requesting the resource (from server or cache). It DOESN'T have matching end attribute.
unloadEventStart- If requested document comes from the same origin as the previous one, the property stores the moment just before browser starts unloading the previous document. Zero otherwise.
unloadEventEnd- The time just after unloading of the previous document of the same origin has finished, zero if no previous document or it has differen origin.
responseStart- Returns the time just after browser receives first byte of the response from server, cache or local resource.
responseEnd- The moment just after browser receives the last byte of the response.
domLoading- The moment just after the
documentobject is created. domInteractive- The moment just after the browser finished parsing the document including scripts inserted in "traditional" blocking way i.e. without
deferorasyncattribute. domContentLoadedEventStart- The time just before
DOMContentLoadedevent is fired, which is just after browser has finished downloading and parsing all the scripts that haddeferset and noasyncattribute. domContentLoadedEventEnd- Moment just after
DOMContentLoadedevent completes. This is when DOMready event in JS frameworks is fired. domComplete- Returns the time when there's nothing more that can delay load event of the document i.e. all images are loaded.
loadEventStart- It returns the time just before
loadevent is fired or zero ifloadhasn't been fired yet. loadEventEnd- Returns the time just after
loadevent has finished. Zero ifloadhasn't been fired yet. *msFirstPaint*- IE specific event that stores the time when document began to be displayed. Zero if loading failed.
*Technically these aren't the properties of the object itself but its prototype (although they're incorrectly implemented in Chrome for now).
It means that though you can access the data with good old performance.timing.fetchStart, you can't get all the keys with Object.keys(performance.timing) or use performance.timing.hasOwnProperty(fetchStart) method on it. Use Object.keys(Object.getPrototypeOf(performance.timing) instead.
This won't however work on Chrome right now (bug is filed here – thanks @marcoos), so just to be safe you can use this method to extract the keys of any Performance object (e.g. performance.timing or performance.navigation):
function getPerfObjKeys(obj) {
var keys = Object.keys(obj);
return keys.length ? keys : Object.keys(Object.getPrototypeOf(obj));
}
If you stumbled on this page by accident here the project that it's connected with.