diff --git a/browserscripts/pageinfo/loaf.js b/browserscripts/pageinfo/loaf.js index d1d085be5..3062b3225 100644 --- a/browserscripts/pageinfo/loaf.js +++ b/browserscripts/pageinfo/loaf.js @@ -1,36 +1,38 @@ -(function() { - // See https://developer.chrome.com/docs/web-platform/long-animation-frames - if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) { - +(function () { + // See https://developer.chrome.com/docs/web-platform/long-animation-frames + if ( + PerformanceObserver.supportedEntryTypes.includes('long-animation-frame') + ) { const MAX_LOAFS_TO_CONSIDER = 10; const relevantLoadEntries = []; - const observer = new PerformanceObserver(list => { - let longestBlockingLoAFs = [].concat(list.getEntries()).sort( - (a, b) => b.blockingDuration - a.blockingDuration - ).slice(0, MAX_LOAFS_TO_CONSIDER); + const observer = new PerformanceObserver(list => {}); + observer.observe({type: 'long-animation-frame', buffered: true}); + const entries = observer.takeRecords(); - // re-package - for (let entry of longestBlockingLoAFs) { - const info = {}; - info.blockingDuration = entry.blockingDuration; - info.duration = entry.duration; - info.styleAndLayoutStart = entry.styleAndLayoutStart; - info.renderStart = entry.renderStart; - info.scripts = []; - for (let script of entry.scripts) { - const s = {}; - s.forcedStyleAndLayoutDuration = script.forcedStyleAndLayoutDuration; - s.invoker = script.invoker; - s.invokerType = script.invokerType; - s.sourceFunctionName = script.sourceFunctionName; - s.sourceURL = script.sourceURL; - info.scripts.push(s); - } - relevantLoadEntries.push(info); - } - return relevantLoadEntries; - }); - observer.observe({ type: 'long-animation-frame', buffered: true }); + let longestBlockingLoAFs = [] + .concat(entries) + .sort((a, b) => b.blockingDuration - a.blockingDuration) + .slice(0, MAX_LOAFS_TO_CONSIDER); + + // re-package + for (let entry of longestBlockingLoAFs) { + const info = {}; + info.blockingDuration = entry.blockingDuration; + info.duration = entry.duration; + info.styleAndLayoutStart = entry.styleAndLayoutStart; + info.renderStart = entry.renderStart; + info.scripts = []; + for (let script of entry.scripts) { + const s = {}; + s.forcedStyleAndLayoutDuration = script.forcedStyleAndLayoutDuration; + s.invoker = script.invoker; + s.invokerType = script.invokerType; + s.sourceFunctionName = script.sourceFunctionName; + s.sourceURL = script.sourceURL; + info.scripts.push(s); + } + relevantLoadEntries.push(info); } + return relevantLoadEntries; + } })(); - \ No newline at end of file