0

I want to monitor the client side performance for a page, and I can get the load time of the page by starting a timer in the beginning of the section and also by getting the time of when the onload event happens. However this does not account for the time it takes to request the page from the server. So after searching i've found out that I should use the web timing API. My problem is that while "window.performance" works for chrome, nothing works for firefox including "window.mozPerformance". So does anyone know how I can find the time of when my browser initiates the get request for a page, and finishes receiving the last byte of the page?

explunit
  • 18,967
  • 6
  • 69
  • 94
anonymous
  • 1
  • 1
  • Use a profiler. Chrome has one built in, and I'm sure FireBug does as well. In Chrome it's called Timers (in the JS console). It will show you exactly when every resource is dealt with, and when every script finishes executing. – beatgammit Sep 11 '11 at 02:40
  • 1
    @tjameson I think you mean the Timeline tab. The Network tab and Audits tab are also useful for this. – Joseph Marikle Sep 11 '11 at 03:23

1 Answers1

0

You can use something like:

var timing = performance.timing;
var loadtime = timing.loadEventEnd – timing.navigationStart;

This will work for you on: Chrome 6+, IE9+, Firefox 7+, Android 4+

And you can read more in this old (but good) post: http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html

Btw, I would use Chrome DevTools (or firebug on Firefox) to measure my code changes in the 'audit' tab. You can see what is the cost for every change in your JS code and measure it without any adding code. Moreover, if you want to see what are the performance of your site (or web app) over time, you have now an option to check the metrics in google analytics.

Ido Green
  • 2,795
  • 1
  • 17
  • 26