⚡️ Process buffered performance entries in an idle callback

packages/core/src/tools/utils.ts

@@ -573,6 +573,26 @@ 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)
+}
+
 export function removeDuplicates<T>(array: T[]) {
   const deduplicated: T[] = []
   const set = new Set<T>()

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

@@ -111,8 +111,12 @@ 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 init
+    setTimeout(monitor(() => handleRumPerformanceEntries(lifeCycle, configuration, performanceEntries)))
   }
+
   if (window.PerformanceObserver) {
     const handlePerformanceEntryList = monitor((entries: PerformanceObserverEntryList) =>
       handleRumPerformanceEntries(lifeCycle, configuration, entries.getEntries())

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)
-}