Web Perf snippets

NavigationTiming.js

timing = performance.timing;
console.log(
  `Unload: ${timing.unloadEventEnd - timing.unloadEventStart}\n`,
  `Redirect: ${timing.redirectEnd - timing.redirectStart}\n`,
  `App Cache: ${timing.domainLookupStart - timing.fetchStart}\n`,
  `DNS: ${timing.domainLookupEnd - timing.domainLookupStart}\n`,
  `TCP: ${timing.connectEnd - timing.connectStart}\n`,
  `Request: ${timing.responseStart - timing.requestStart}\n`,
  `Response: ${timing.responseEnd - timing.responseStart}\n`,
  `Processing: ${timing.domComplete - timing.domLoading}\n`,
  `Onload: ${timing.loadEventEnd - timing.loadEventStart}\n`
);

ResourceTiming.js

var resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  console.log(
    `Name: ${resource.name}\n`,
    `Entry Type: ${resource.entryType}\n`,
    `Start Time: ${resource.startTime}\n`,
    `Duration: ${resource.duration}\n`,
    `Redirect: ${resource.redirectEnd - resource.redirectStart}\n`,
    `DNS: ${resource.domainLookupEnd - resource.domainLookupStart}\n`,
    `TCP: ${resource.connectEnd - resource.connectStart}\n`,
    `Request: ${resource.responseStart - resource.requestStart}\n`,
    `Response: ${resource.responseEnd - resource.responseStart}\n`
  ); 
});

UserTiming.js

performance.mark('start');
setTimeout(() => {
  performance.mark('end');
  performance.measure('measure-start-end', 'start', 'end');
  console.log(performance.getEntriesByType('mark'));
  console.log(performance.getEntriesByType('measure'));
  // or
  console.log(performance.getEntriesByName('start'));
  console.log(performance.getEntriesByName('measure-start-end'));
}, 1000);