Calculating and verifying Time To First Byte (TTFB

问题:

I was given the following formulas to measure Time To First Byte (TTFB), TTFB to DOM Ready and Page Load.

TTFB

window.performance.timing.responseStart - window.performance.timing.navigationStart

TTFB to DOM Ready

window.performance.timing.domComplete - window.performance.timing.navigationStart

Page Load

window.performance.timing.loadEventStart - window.performance.timing.navigationStart

Are these formulas correct? And how would I be able to check them? I've heard you can measure them in Firebug's Network panel, but it seems overall cumbersome in retrieving the values. Not sure where you get the values in Chrome.

So, how to determine those measurements?

回答1:

Firebug actually makes it very easy to see those timings. You just need to execute window.performance.timing in its command line and it will display a graph and lists all timings below like this:

Also, according to the description on MDN, I'd say your calculation should start at fetchStart, as that is the moment in time when the browser is ready to fetch the document using an HTTP request. Depending on your definition of DOM Ready the end time of that measurement may also be the domInteractive or domContentLoadedEventStart time.

So, I'd say the correct measurements would be:

TTFB

window.performance.timing.responseStart - window.performance.timing.fetchStart

TTFB to DOM Ready

window.performance.timing.domInteractive - window.performance.timing.fetchStart

Page Load

window.performance.timing.loadEventStart - window.performance.timing.fetchStart

回答2:

This can be confirmed using Chrome's network tab:

Example TTFB:

window.performance.timing.responseStart - window.performance.timing.requestStart