Notification for new navigation timing entries

Navigation and user timings have been useful to gather and analysis on
the server side. Though, its a bit tricky to build tools that just
take that data and upload it to a server. Theres no notification when
new performance entries have been recorded. This requires invasive
code to recheck the performance entries buffer.

    var seen = 0;
    function reportPerformance() {
      var entries = performance.getEntries();
      var newEntries = entries.slice(seen);
      seen = entries.length;
      if (newEntries.length) {
        navigator.sendBeacon("/stats",
          JSON.stringify(newEntries));
      }
    });

    // gather all entries from initial load
    window.addEventListener("load", function() {
      reportPerformance();
    });

    // report script timing after async script loads
    var script = document.createElement("script");
    script.src = "/async-script.js";
    script.onload = reportPerformance;
    document.head.appendChild(script);

    // report user timing
    window.performance.mark("mark_fully_loaded");
    reportPerformance();

And knowing when its safe to read performance.timing stats has a small
edge case.

    window.addEventListener("load", function() {
      performance.timing.loadEventEnd; // 0
      setTimeout(function() {
        performance.timing.loadEventEnd; // 123
      }, 0);
    });

It would be helpful to receive an event or callback when the browser
knows there are new performance entries available. This should cover
any resource and user timings. Anything that will add new entries to
`performance.getEntries()`. The notification should not even be
synchronous. Batching and throttling the notification would be up to
the browser.

As of the NavigationTiming2 spec, the Performance interface is already
an EventTarget. Heres an example of using a fictitious event name with
to log client performance timings back to a server backend.

    performance.addEventListener("entries", function(event) {
      navigator.sendBeacon("/stats",
        JSON.stringify(event.newEntries));
    });


And maybe even add an event or promise for navigation timing readiness.

    performance.timing.ready().then(function() {
      navigator.sendBeacon("/stats",
        JSON.stringify(performance.timing));
    });

Received on Monday, 17 February 2014 17:33:35 UTC