Performance Observer

Instead of polling the Peformance Timeline you can now (well, at least in Chrome Canary) subscribe to notifications of new performance metrics via Performance Observer! A simple example in action:

    var observer = new PerformanceObserver(function(list) {      
      list.getEntries().map(entry => {
        var pre = document.createElement('pre')
        pre.innerText = JSON.stringify(obj(entry), null, '\t');
        document.getElementById('observe').appendChild(pre);
      })
    });
      
    // Register for User and Resource Timing events
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');
    
    // Log document state changes to performance timeline
    document.onreadystatechange = function () {
      performance.mark("dom-"+document.readyState);
    }          
  

Observed performance metrics on this page...

User Timing

Defines the performance.mark and performance.measure methods that expose a high precision timestamp to developers so they can better measure the performance of their applications.

Resource Timing

Observer receives notifications whenever a new Resource Timing event is registered with the performance timeline - i.e. whenever a resource fetch is finished...

Other...

• Have questions or feedback? Open an issue on GitHub repo or ping @igrigorik.
• Navigation Timing support is not yet hooked up to Performance Observer in Chrome Canary.