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... 

    {
    	"detail": null,
    	"name": "registered-observer",
    	"entryType": "mark",
    	"startTime": 56.39999997615814,
    	"duration": 0
    }
    {
    	"detail": null,
    	"name": "dom-interactive",
    	"entryType": "mark",
    	"startTime": 58.5,
    	"duration": 0
    }
    {
    	"initiatorType": "link",
    	"nextHopProtocol": "",
    	"deliveryType": "",
    	"workerStart": 0,
    	"redirectStart": 0,
    	"redirectEnd": 0,
    	"fetchStart": 53.199999928474426,
    	"domainLookupStart": 0,
    	"domainLookupEnd": 0,
    	"connectStart": 0,
    	"connectEnd": 0,
    	"secureConnectionStart": 0,
    	"requestStart": 0,
    	"responseStart": 0,
    	"responseEnd": 257.6999999284744,
    	"transferSize": 0,
    	"encodedBodySize": 0,
    	"decodedBodySize": 0,
    	"serverTiming": [],
    	"responseStatus": 0,
    	"firstInterimResponseStart": 0,
    	"renderBlockingStatus": "blocking",
    	"name": "https://fonts.googleapis.com/css?family=Roboto",
    	"entryType": "resource",
    	"startTime": 53.199999928474426,
    	"duration": 204.5
    }
    {
    	"initiatorType": "img",
    	"nextHopProtocol": "",
    	"deliveryType": "",
    	"workerStart": 0,
    	"redirectStart": 0,
    	"redirectEnd": 0,
    	"fetchStart": 53.60000002384186,
    	"domainLookupStart": 0,
    	"domainLookupEnd": 0,
    	"connectStart": 0,
    	"connectEnd": 0,
    	"secureConnectionStart": 0,
    	"requestStart": 0,
    	"responseStart": 0,
    	"responseEnd": 274.5,
    	"transferSize": 0,
    	"encodedBodySize": 0,
    	"decodedBodySize": 0,
    	"serverTiming": [],
    	"responseStatus": 0,
    	"firstInterimResponseStart": 0,
    	"renderBlockingStatus": "non-blocking",
    	"name": "http://1.cuzillion.com/bin/resource.cgi?type=gif&sleep=2&n=1&t=1444072345",
    	"entryType": "resource",
    	"startTime": 53.60000002384186,
    	"duration": 220.89999997615814
    }
    {
    	"detail": null,
    	"name": "dom-complete",
    	"entryType": "mark",
    	"startTime": 274.89999997615814,
    	"duration": 0
    }

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.

Mark name:

Measure name: Start mark (opt): End mark (opt):

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...