LongTask.md

Browser LongTask API

https://www.w3.org/TR/longtasks/

const observer = new PerformanceObserver((list) => {
  for(const entry of list.getEntries()){
    console.log(`Long Task - time: ${entry.startTime + entry.duration}, attribution: ${JSON.stringify(entry.attribution)}`)
    //sendDataToAnalytics('Long Task', {time: entry.startTime + entry.duration, attribution: JSON.stringify(entry.attribution)});
  }
})

observer.observe({entryTypes: ['longtask']})

Old way

This was depricated as we need to ensure we are not detoriating performance while monitoring for performance bottlenecks.

(function detectLongFrame(){
	var lastFrameTime = Date.now()
	requestAnimationFrame(function(){
		var currentFrameTime = Date.now()

		if(currentFrameTime - lastFrameTime > 50){
			//Report long frame here ...
		}

		detectLongFrame(currentFrameTime)
	})
}())