Re: Notification for new navigation timing entries

Seems like a good idea. Does anyone else have comments?


On Mon, Feb 17, 2014 at 9:33 AM, Joshua Peek <josh@joshpeek.com> wrote:

> 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));
>     });
>
>