Can the NavigationTimingAPI be used on asynchronous calls?

Question

I'm currently implementing performance measuring functionality in our project which uses custom elements v1.

The NavigationTimingAPI offers very detailed measuring on different navigation types (navigate, reload, browser back/forward):

Can the same (or similarly detailed) be made available for asynchronous calls as well? Or is there another API for that which I'm unaware of?

That is, when the page is fully loaded and some user interaction or event triggers a POST or GET on a server-located resource.

The only thing I found so far is setting measurepoints using performance.mark().

Did I miss something crucial here?

score 1 · Answer 1 · 2019-05-16T18:59:11.880

You named Navigation Timing and found the User Timing with performance.mark() but missed the Resource Timing API. All three is parts of the Performance Timing API.

Navigation Timing measures the homepage or app. Resource Timing API is similar but it’s provided for each individual asynchroniously loaded resource to get them compaired in relation to the navigation times.

Think about this: Asynchroniously loaded files has no DOM to run! That means dom-properties is missing in resource timing. But the beginning part is same as in navigation timing:

How about startTime that is the most important property of Performance Timing API? Each asychronious call has their own! The startTime is 0 for document and >0 ms for Javascript files and resources.

The startTime is the first recorded timestamp - an origin of measures. It marks the time when the browser first starts the process of loading the resource. In resource timing startTime is same as fetchStart or redirectStart (if not zero) when timing a resource.

Resources as CSS or images has neither dom or execution, but resources with .js extension executes Javascript, so there is a user timing possible with performance.mark() as you already found out.

Can the NavigationTimingAPI be used on asynchronous calls?

Yes and No. Resource Timing get marks automatically that can be relative to Navigation Timing that make very useful comparisions. So yes - but no: Measuring index.html (navigation) and measuring asynchronious calls (resources) is not the same:
Change performance.getEntriesByType("navigation") to performance.getEntriesByType("resource").

score 0 · Accepted Answer · answered Feb 26 '19 at 15:27

I missed the obvious here.

Each XMLHTTPRequest with all the applicable details is automatically available as a PerformanceResourceTiming object in

performance
  .getElementsByType("resource")
  .filter(function(x) { 
    return x.initiatorType === "xmlhttprequest";
  });

I was looking into the performance.timing object only (actually the only thing not available via performance.getElementsByType()).

Can the NavigationTimingAPI be used on asynchronous calls?

2 Answers2