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
fetchStart
anddomainLookupStart
browser 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
domainLookupEnd
value. secureConnectionStart
- Optional. If page is using HTTPS it's the time just before handshake for secure connection is initiated.
undefined
otherwise. 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
document
object is created. domInteractive
- The moment just after the browser finished parsing the document including scripts inserted in "traditional" blocking way i.e. without
defer
orasync
attribute. domContentLoadedEventStart
- The time just before
DOMContentLoaded
event is fired, which is just after browser has finished downloading and parsing all the scripts that haddefer
set and noasync
attribute. domContentLoadedEventEnd
- Moment just after
DOMContentLoaded
event 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
load
event is fired or zero ifload
hasn't been fired yet. loadEventEnd
- Returns the time just after
load
event has finished. Zero ifload
hasn'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.