Time to first byte with javascript?

Question

Is there any modern browser that via javascript exposes time to first byte (TTFB) and/or time to last byte (TTLB) on a http request without resorting to any plugin?

What I would like is a javascript snippet that can access these values and post them back the the server for performance monitoring purposes.

Clarification: I am not looking for any js timers or developer tools. What I wonder and hoping is if there are any browsers that measures load times and exposes those value via javascript.

You mean measure the time taking the page to load using JavaScript? — Shadow The GPT Wizard, Jun 30 '11 at 10:36
Yes. If possible I would like the time it takes from that the browser sends the request until it starts receiving data and/or when this data is all received. The data you can get in Safari/Chrome Developer Tools, Firebug etc. Without resorting to any developer tool at all. — NA., Jun 30 '11 at 10:46

score 19 · Accepted Answer · edited May 19 '17 at 20:17

What you want is the W3C's PerformanceTiming interface. Browser support is good (see this survey from Sep 2011). Like you speculated in response to Shadow Wizard's answer, these times are captured by the browser and exposed to javascript in the window object. You can find them in window.performance.timing. The endpoint of your TTFB interval will be window.performance.timing.responseStart (defined as "the time immediately after the user agent receives the first byte of the response from the server, or from relevant application caches or from local resources"). There are some options for the starting point, depending on whether you're interested in time to unload the previous document, or time to resolve DNS, so you probably want to read the documentation and decide which one is right for your application.

var performanceTiming = performance.timing; ttfb = performanceTiming.responseStart - performanceTiming.requestStart; This is supported by IE 7+ — Beakal, Jan 11 '18 at 08:46

daniel.herken · Answer 2 · 2012-03-14T11:24:58.023

0

You can see the response time in the Chrome Developer Tools.

edited Mar 14 '12 at 11:24

answered Jun 30 '11 at 10:36

daniel.herken

1,095
7
19

1

He explicitly asked "without resorting to any plugin" - guess he means Firebug and the like as well. – Shadow The GPT Wizard Jun 30 '11 at 10:47
True, but Firebug is. For the record, the -1 is not mine - this is not bad answer, just has a "flaw" which I indicated. :) By the way what made you recall this answer of yours almost full year after you posted it? – Shadow The GPT Wizard Mar 14 '12 at 11:26
You were 100% right, I corrected the answer. The -1 brought my attention :-) – daniel.herken Mar 14 '12 at 16:53

score 0 · Answer 3 · answered Jun 30 '11 at 10:50

0

I fear it's just not possible.

JavaScript becomes "active" only after part of the request has been sent from server, accepted by the browser and parsed.

What you ask is kind like asking "Can I measure the weight of a cake after eating it?" - you need to first weight and only then eat the cake.

answered Jun 30 '11 at 10:50

Shadow The GPT Wizard

66,030
26
140
208

1

Thanks for your reply. I wouldn't exactly put it that way more like "Can I access something that the browser have measured for me via javascript". Obviously there needs to be something in the browser that collects the statistics I am after. The JS part would merely be exposing these already collected values. – NA. Jun 30 '11 at 11:35
Perhaps it would be possible to do an io file retrieval on a file in the loaded in the HTML header - if the server time at which they were last accessed is something that is available? That might tell you the start time. If that even worked the end time would be more difficult anyway because the time it was loaded isn't the time the last byte was read... just a thought. – danjah Jun 30 '11 at 11:44
@NA no, can't see any reason why the browser will collect such a thing? Maybe in Open Source browser it's possible to expose such a thing, but I highly doubt that there is any modern browser that store such stats, let alone expose them to JS. Anyhow, everything related to browser will be part of the `navigator` object. – Shadow The GPT Wizard Jun 30 '11 at 12:58

Stuart K · Answer 4 · 2011-06-30T12:23:34.517

-1

It's impossible to get the true TTFB in JS, as the page gets a JS context only after the first byte has been received. The closest you can get is with something like the following:

<script type="text/javascript">var startTime = (new Date()).getTime()</script>

very early in your <head> tag. Then depending on if you want to check when the html finishes, or everything finishes downloading, you can either put a similar tag near the bottom of your html page (and subtract the values), and then do an XHR back to the server (or set a cookie, which you can retrieve server side on the next page request) or listen to the onload event, and do the same.

edited Jun 30 '11 at 12:23

answered Jun 30 '11 at 10:42

Stuart K

3,212
4
22
27

2

But TTFB is measured from when the request is sent. By definition the TTFB will have elapsed as the javascript will be contained in later bytes. – detaylor Jun 30 '11 at 10:45
That and Javascript time measurement is f'd: http://ejohn.org/blog/accuracy-of-javascript-time/ – danjah Jun 30 '11 at 10:53
@Smirkin yep, but it's the closest you're going to get using Javascript. Edited to make this clearer. – Stuart K Jun 30 '11 at 12:23
true. It depends on what you are trying to measure. If you are looking at how long it takes to deliver the content i.e. TTLB - TTFB then it would give an indication. However, it would not give any indication of response times. If the page is small and takes a couple of milliseconds to receive the content but the initial response takes a minute then it may appear that you have great performance but the user experience would be different. – detaylor Jun 30 '11 at 12:34

Time to first byte with javascript?

4 Answers4

Linked