CODEWITHSUNDEEP
javascriptperformancebrowsermetrics
Kenners
Kenners

Reputation: 53

In PerformanceTiming, which part of the process model do AJAX request times contribute towards?

I'm using the PerformanceTiming interface to measure page load time.

Several of my pages have a long "Browser Time" (i.e. loadEventEnd - responseEnd), and I think this could be because of the Ajax requests from the pages.

My question is: where do Ajax requests fit in the PerformanceTiming process model? Is it in the "Processing" block?

Process Model

If so, what's the best way to measure the Ajax execution time?

Upvotes: 1

Views: 630

Answers (2)

BenH
BenH

Reputation: 167

We're currently fighting this issue. For a couple of years, we've had ajax requests that are fired with jQuery's "document ready" timer. This shouldn't have - technically speaking - extended the loadEventEnd. However, with absolute certainty, they did push out firing the loadEventEnd.

Now, we're digging to see what happened with our last release that moved those values outside of loadEventEnd.

To really measure those ajax requests, you'll want to use IE10 or - preferably - a chrome version greater than 28. Those both include the resourceTiming interface.

You can access metrics similar to the navigationTiming interface above for each resource loaded on a page.

From the javascript console in chrome (ctrl+shift+j on windows), enter:

window.performance.getEntries()

this will return all of the objects associated with your page. To get the ajax requests, you'll want initatorType = xmlhttprequest. You can find all of those events with the following:

for(var i=0; i<window.performance.getEntries().length;i++){  
    console.log(window.performance.getEntries()[i].initiatorType);
}

Upvotes: 2

matt freake
matt freake

Reputation: 5090

The Ajax Requests are after the end of the model.

See https://stackoverflow.com/a/16289733/1168884 for an example where an Ajax request runs and does not affect the properties on the performance object (which only reflects the loading of the page)

I guess the underlying issue is that, where as the page-loading events are quite defined (for example the DOM is now complete and available) and this is reflected in the model. The Ajax events are not (for example, there isn't really an event when you can say "all Ajax on the page has now completed running").

I haven't tried it, but there a project Boomerang which promises to allow the measuring of dynamically loaded content - http://lognormal.github.io/boomerang/doc/use-cases.html

Upvotes: 0

Related Questions