Browser - Page and User Performance API
About
The performance timeline 1) is an API to measure user or browser page load performance.
Example
User script Perf
performance.mark("startWork");
doWork(); // Some developer code
performance.mark("endWork");
Page Load
Page load performance
<img src="/_media/lenna.png" width="200px"/>
window.addEventListener("load", function(){
performance
.getEntries()
.map(entry => JSON.stringify(entry, null, 2))
.forEach(json => console.log(json));
})
Performance Metrics Observer
Example with Largest ContentFul Paint (LCP)
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate: '+entry.startTime);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
By entry types:
new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
// Display each reported measurement on console
console.log("Name: " + entry.name +
", Type: " + entry.entryType +
", Start: " + entry.startTime +
", Duration: " + entry.duration + "\n");
});
}).observe({entryTypes: ['resource', 'mark', 'measure']});