⚡️ Process buffered performance entries in an idle callback

packages/core/src/tools/utils.ts

@@ -564,3 +564,23 @@ export function combine(...sources: any[]): unknown {
 }
 
 export type TimeoutId = ReturnType<typeof setTimeout>
+
+export function requestIdleCallback(callback: () => void, opts?: { timeout?: number }) {
+  interface BrowserWindow extends Window {
+    requestIdleCallback: (callback: () => void, opts?: { timeout?: number }) => number
+    cancelIdleCallback: (handle?: number) => void
+  }
+  const browserWindow = window as unknown as BrowserWindow
+
+  // Use 'requestIdleCallback' when available: it will throttle the mutation processing if the
+  // browser is busy rendering frames (ex: when frames are below 60fps). When not available, the
+  // fallback on 'requestAnimationFrame' will still ensure the mutations are processed after any
+  // browser rendering process (Layout, Recalculate Style, etc.), so we can serialize DOM nodes
+  // efficiently.
+  if (browserWindow.requestIdleCallback) {
+    const id = browserWindow.requestIdleCallback(monitor(callback), opts)
+    return () => browserWindow.cancelIdleCallback(id)
+  }
+  const id = browserWindow.requestAnimationFrame(monitor(callback))
+  return () => browserWindow.cancelAnimationFrame(id)
+}

packages/rum-core/src/browser/performanceCollection.ts

@@ -7,6 +7,7 @@ import {
   monitor,
   relativeNow,
   runOnReadyState,
+  requestIdleCallback,
 } from '@datadog/browser-core'
 import type { RumConfiguration } from '../domain/configuration'
 import type { LifeCycle } from '../domain/lifeCycle'
@@ -109,8 +110,14 @@ export function startPerformanceCollection(lifeCycle: LifeCycle, configuration:
   })
 
   if (supportPerformanceObject()) {
-    handleRumPerformanceEntries(lifeCycle, configuration, performance.getEntries())
+    const performanceEntries = performance.getEntries()
+    // Because the performance entry list can be quite large
+    // delay the computation to prevent the SDK from blocking the main thread on page load
+    waitForRequestIdleOrUnload(lifeCycle, () => {
+      handleRumPerformanceEntries(lifeCycle, configuration, performanceEntries)
+    })
   }
+
   if (window.PerformanceObserver) {
     const handlePerformanceEntryList = monitor((entries: PerformanceObserverEntryList) =>
       handleRumPerformanceEntries(lifeCycle, configuration, entries.getEntries())
@@ -154,6 +161,17 @@ export function startPerformanceCollection(lifeCycle: LifeCycle, configuration:
   }
 }
 
+function waitForRequestIdleOrUnload(lifeCycle: LifeCycle, callback: () => void) {
+  let hasBeenCalled = false
+  const callOnce = () => {
+    if (hasBeenCalled) return
+    hasBeenCalled = true
+    callback()
+  }
+  requestIdleCallback(callOnce)
+  lifeCycle.subscribe(LifeCycleEventType.BEFORE_UNLOAD, callOnce)
+}
+
 export function retrieveInitialDocumentResourceTiming(callback: (timing: RumPerformanceResourceTiming) => void) {
   runOnReadyState('interactive', () => {
     let timing: RumPerformanceResourceTiming

packages/rum/src/domain/record/mutationBatch.ts

@@ -1,4 +1,4 @@
-import { monitor, noop } from '@datadog/browser-core'
+import { noop, requestIdleCallback } from '@datadog/browser-core'
 import type { RumMutationRecord } from './types'
 
 /**
@@ -22,7 +22,7 @@ export function createMutationBatch(processMutationBatch: (mutations: RumMutatio
   return {
     addMutations: (mutations: RumMutationRecord[]) => {
       if (pendingMutations.length === 0) {
-        cancelScheduledFlush = scheduleMutationFlush(flush)
+        cancelScheduledFlush = requestIdleCallback(flush, { timeout: MUTATION_PROCESS_MAX_DELAY })
       }
       pendingMutations.push(...mutations)
     },
@@ -34,23 +34,3 @@ export function createMutationBatch(processMutationBatch: (mutations: RumMutatio
     },
   }
 }
-
-function scheduleMutationFlush(flush: () => void) {
-  interface BrowserWindow extends Window {
-    requestIdleCallback: (callback: () => void, opts?: { timeout?: number }) => number
-    cancelIdleCallback: (handle?: number) => void
-  }
-  const browserWindow = window as unknown as BrowserWindow
-
-  // Use 'requestIdleCallback' when available: it will throttle the mutation processing if the
-  // browser is busy rendering frames (ex: when frames are below 60fps). When not available, the
-  // fallback on 'requestAnimationFrame' will still ensure the mutations are processed after any
-  // browser rendering process (Layout, Recalculate Style, etc.), so we can serialize DOM nodes
-  // efficiently.
-  if (browserWindow.requestIdleCallback) {
-    const id = browserWindow.requestIdleCallback(monitor(flush), { timeout: MUTATION_PROCESS_MAX_DELAY })
-    return () => browserWindow.cancelIdleCallback(id)
-  }
-  const id = browserWindow.requestAnimationFrame(monitor(flush))
-  return () => browserWindow.cancelAnimationFrame(id)
-}