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.

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
It can be either the start time of redirect (if such is present) or zero
If redirect is present it stores the time when last byte of the response of last redirect was received. Zero otherwise.
The time just before browser starts doing anything with the request. It's when the actual request starts. Between fetchStart and domainLookupStart browser checks its cache.
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
The time after browser finishes domain lookup. If DNS wasn't checked it has the value of fetchStart
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
Time when browser finishes establishing connection with server. If no connection was made it has the domainLookupEnd value.
Optional. If page is using HTTPS it's the time just before handshake for secure connection is initiated. undefined otherwise.
The moment just before browser starts requesting the resource (from server or cache). It DOESN'T have matching end attribute.
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.
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.
Returns the time just after browser receives first byte of the response from server, cache or local resource.
The moment just after browser receives the last byte of the response.
The moment just after the document object is created.
The moment just after the browser finished parsing the document including scripts inserted in "traditional" blocking way i.e. without defer or async attribute.
The time just before DOMContentLoaded event is fired, which is just after browser has finished downloading and parsing all the scripts that had defer set and no async attribute.
Moment just after DOMContentLoaded event completes. This is when DOMready event in JS frameworks is fired.
Returns the time when there's nothing more that can delay load event of the document i.e. all images are loaded.
It returns the time just before load event is fired or zero if load hasn't been fired yet.
Returns the time just after load event has finished. Zero if load hasn't been fired yet.
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.

Fork me on GitHub