问题
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
来源：https://stackoverflow.com/questions/35296436/calculating-and-verifying-time-to-first-byte-ttfb