Geek Answers Handbook

Time to first byte with javascript?

Is there any modern browser that through javascript provides the time for the first byte (TTFB) and / or the time of the last byte (TTLB) in the HTTP request without using any plugin?

What I need is a javascript fragment that can access these values ​​and publish them back to monitor performance.

Explanation: I am not looking for any js timer or developer tools. To which I am surprised and hope that there are some browsers that measure load time and reveal this value through javascript.

+7
source share
4 answers

You need the W3C PerformanceTiming interface. Browser support is good (see this poll from September 2011). Just as you suggested in response to the Shadow Wizard answer, these times are captured by the browser and are 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 the corresponding application caches or from local resources"). There are several options for the starting point, depending on whether you want time to upload the previous document or time to resolve the DNS, so you probably want to read the documentation and decide which one is right for your application.

+11
source

I am afraid that this is simply impossible.

JavaScript becomes "active" only after . Part of the request was sent from the server, accepted by the browser and analyzed.

What you are asking kindly asks: "Can I measure the weight of the pie after taking it?" - You need to weigh first, and then eat the cake.

+1
source

You can see the response time in the Chrome developer tools.

0
source

It is not possible to get true TTFB in JS since the page only gets the JS context after the first byte has been received. The closest you can get is something like the following:

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

very early in the <head> . Then, depending on whether you want to check whether the html ends or the download ends, you can put a similar tag at the bottom of the html page (and subtract the values) and then make XHR back to the server (or set a cookie that you can get on the server side the next time the page is requested) or listen for the onload and do the same.

0
source

More articles:


All Articles