DBW: use navigator.sendBeacon in beforeunload/pagehide handlers

How to check:

• look for beforeunload/pagehide handlers (can reuse https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/gather/gatherers/dobetterweb/document-event-listeners.js)
• check for sync xhrs or fetch calls in the handler

because user agents typically ignore asynchronous XMLHttpRequests made in an unload handler.

To solve this problem, analytics and diagnostics code have historically made a synchronous XMLHttpRequest call in an unload or beforeunload event handler to submit the data. The synchronous XMLHttpRequest blocks the process of unloading the document, which in turn causes the next navigation appear to be slower. There is nothing the next page can do to avoid this perception of poor page load performance, and the result is that the user perceives that the new web page is slow to load, even though the true issue is with the previous page.

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

[ebidel]

“uses-sendbeacon” sgtm.

For the network stuff, it looks like something clever like this could work. I didn’t realize you could dispatching beforeunload yourself works!

// Inject this into page in beforePass
const observer = new PerformanceObserver(list => {
  const xhrsRequests = list.getEntries().filter(entry => {
    // Note: fetch() does not have initiatorType - https://crbug.com/649571
    return entry.initiatorType === 'xmlhttprequest';
  });
  if (xhrsRequests.length) {
    console.log(xhrsRequests);
  }
}).observe({entryTypes: ['resource']});

// Example of page code that you should add to lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html
window.addEventListener('beforeunload', e => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.chromestatus.com/features', false);
  xhr.send();
});

// Inject into page in `afterPass`
window.dispatchEvent(new CustomEvent('beforeunload'));
window.dispatchEvent(new CustomEvent('pagehide'));

You could wrap the observer and dispatching part in a function that gets injected into the page. Example. You might need to play around with delaying dispatching the events.

This would’t tell you that the XHR was sync (unless you also grep the console output for the warning chrome throws when sync xhrs are used), but I don’t think it would hurt to always suggest navigator.sendBeacon for all requests made in beforeunload and pagehide handlers.

[connorjclark]

window.addEventListener('beforeunload', function () {
   var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
  console.log(request.responseText);
}
});

VM26:1 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://developer.mozilla.org/bar/foo.txt': Synchronous XHR in page dismissal.