feat: use yielding to main thread in more places

pauldambra · pauldambra · commit e1fa634e3e5d · 2025-11-15T14:50:30.000Z
diff --git a/.changeset/smooth-wolves-mix.md b/.changeset/smooth-wolves-mix.md
@@ -0,0 +1,5 @@
+---
+'posthog-js': minor
+---
+
+feat: introduce a task queue that will yield to the main thread periodically reducing the impact of long operations
diff --git a/packages/browser/src/extensions/replay/external/lazy-loaded-session-recorder.ts b/packages/browser/src/extensions/replay/external/lazy-loaded-session-recorder.ts
@@ -35,6 +35,7 @@ import { assignableWindow, LazyLoadedSessionRecordingInterface, window, document
 import { addEventListener } from '../../../utils'
 import { MutationThrottler } from './mutation-throttler'
 import { createLogger } from '../../../utils/logger'
+import { processWithYield } from '../../../utils/task-queue'
 import {
     clampToRange,
     includes,
@@ -1068,17 +1069,23 @@ export class LazyLoadedSessionRecording implements LazyLoadedSessionRecordingInt
 
         if (this._buffer.data.length > 0) {
             const snapshotEvents = splitBuffer(this._buffer)
-            snapshotEvents.forEach((snapshotBuffer) => {
-                this._flushedSizeTracker?.trackSize(snapshotBuffer.size)
-                this._captureSnapshot({
-                    $snapshot_bytes: snapshotBuffer.size,
-                    $snapshot_data: snapshotBuffer.data,
-                    $session_id: snapshotBuffer.sessionId,
-                    $window_id: snapshotBuffer.windowId,
-                    $lib: 'web',
-                    $lib_version: Config.LIB_VERSION,
-                })
-            })
+            // Process snapshot captures with yielding to avoid blocking on large buffers
+            // Fire-and-forget: each _captureSnapshot is independent
+            processWithYield(
+                snapshotEvents,
+                (snapshotBuffer) => {
+                    this._flushedSizeTracker?.trackSize(snapshotBuffer.size)
+                    this._captureSnapshot({
+                        $snapshot_bytes: snapshotBuffer.size,
+                        $snapshot_data: snapshotBuffer.data,
+                        $session_id: snapshotBuffer.sessionId,
+                        $window_id: snapshotBuffer.windowId,
+                        $lib: 'web',
+                        $lib_version: Config.LIB_VERSION,
+                    })
+                },
+                { timeBudgetMs: 30 }
+            )
         }
 
         // buffer is empty, we clear it in case the session id has changed
diff --git a/packages/browser/src/extensions/replay/external/network-plugin.ts b/packages/browser/src/extensions/replay/external/network-plugin.ts
@@ -18,6 +18,7 @@ import { formDataToQuery } from '../../../utils/request-utils'
 import { patch } from '../rrweb-plugins/patch'
 import { isHostOnDenyList } from '../../../extensions/replay/external/denylist'
 import { defaultNetworkOptions } from './config'
+import { processWithYield } from '../../../utils/task-queue'
 
 const logger = createLogger('[Recorder]')
 
@@ -61,11 +62,18 @@ function initPerformanceObserver(cb: networkCallback, win: IWindow, options: Req
                     isNavigationTiming(entry) ||
                     (isResourceTiming(entry) && options.initiatorTypes.includes(entry.initiatorType as InitiatorType))
             )
-        cb({
-            requests: initialPerformanceEntries.flatMap((entry) =>
-                prepareRequest({ entry, method: undefined, status: undefined, networkRequest: {}, isInitial: true })
-            ),
-            isInitial: true,
+
+        // Process initial performance entries with yielding for large sets
+        processWithYield(
+            initialPerformanceEntries,
+            (entry) =>
+                prepareRequest({ entry, method: undefined, status: undefined, networkRequest: {}, isInitial: true }),
+            { timeBudgetMs: 30 }
+        ).then((requests) => {
+            cb({
+                requests: requests.flat(),
+                isInitial: true,
+            })
         })
     }
     const observer = new win.PerformanceObserver((entries) => {
diff --git a/packages/browser/src/posthog-core.ts b/packages/browser/src/posthog-core.ts
@@ -11,6 +11,7 @@ import {
     SURVEYS_REQUEST_TIMEOUT_MS,
     USER_STATE,
 } from './constants'
+import { TaskQueue } from './utils/task-queue'
 import { DeadClicksAutocapture, isDeadClicksEnabledForAutocapture } from './extensions/dead-clicks-autocapture'
 import { ExceptionObserver } from './extensions/exception-autocapture'
 import { HistoryAutocapture } from './extensions/history-autocapture'
@@ -663,10 +664,6 @@ export class PostHog {
     }
 
     private _initExtensions(startInCookielessMode: boolean): void {
-        // we don't support IE11 anymore, so performance.now is safe
-        // eslint-disable-next-line compat/compat
-        const initStartTime = performance.now()
-
         this.historyAutocapture = new HistoryAutocapture(this)
         this.historyAutocapture.startIfEnabled()
 
@@ -733,52 +730,39 @@ export class PostHog {
         })
 
         // Process tasks with time-slicing to avoid blocking
-        this._processInitTaskQueue(initTasks, initStartTime)
-    }
-
-    private _processInitTaskQueue(queue: Array<() => void>, initStartTime: number): void {
-        const TIME_BUDGET_MS = 30 // Respect frame budget (~60fps = 16ms, but we're already deferred)
-
-        while (queue.length > 0) {
-            // Only time-slice if deferred init is enabled, otherwise run synchronously
-            if (this.config.__preview_deferred_init_extensions) {
-                // we don't support IE11 anymore, so performance.now is safe
-                // eslint-disable-next-line compat/compat
-                const elapsed = performance.now() - initStartTime
-
-                // Check if we've exceeded our time budget
-                if (elapsed >= TIME_BUDGET_MS && queue.length > 0) {
-                    // Yield to browser, then continue processing
-                    setTimeout(() => {
-                        this._processInitTaskQueue(queue, initStartTime)
-                    }, 0)
-                    return
-                }
-            }
-
-            // Process next task
-            const task = queue.shift()
-            if (task) {
+        // Only use time-slicing if deferred init is enabled, otherwise process synchronously
+        if (this.config.__preview_deferred_init_extensions) {
+            const taskQueue = new TaskQueue({
+                timeBudgetMs: 30,
+                onComplete: (totalTimeMs) => {
+                    this.register_for_session({
+                        $sdk_debug_extensions_init_method: 'deferred',
+                        $sdk_debug_extensions_init_time_ms: totalTimeMs,
+                    })
+                    logger.info(`PostHog extensions initialized (${totalTimeMs}ms)`)
+                },
+                onError: (error) => {
+                    logger.error('Error initializing extension:', error)
+                },
+            })
+            taskQueue.enqueueAll(initTasks)
+        } else {
+            // we don't support IE11 anymore, so performance.now is safe
+            // eslint-disable-next-line compat/compat
+            const startTime = performance.now()
+            initTasks.forEach((task) => {
                 try {
                     task()
                 } catch (error) {
                     logger.error('Error initializing extension:', error)
                 }
-            }
-        }
-
-        // All tasks complete - record timing for both sync and deferred modes
-        // we don't support IE11 anymore, so performance.now is safe
-        // eslint-disable-next-line compat/compat
-        const taskInitTiming = Math.round(performance.now() - initStartTime)
-        this.register_for_session({
-            $sdk_debug_extensions_init_method: this.config.__preview_deferred_init_extensions
-                ? 'deferred'
-                : 'synchronous',
-            $sdk_debug_extensions_init_time_ms: taskInitTiming,
-        })
-        if (this.config.__preview_deferred_init_extensions) {
-            logger.info(`PostHog extensions initialized (${taskInitTiming}ms)`)
+            })
+            // eslint-disable-next-line compat/compat
+            const totalTimeMs = Math.round(performance.now() - startTime)
+            this.register_for_session({
+                $sdk_debug_extensions_init_method: 'synchronous',
+                $sdk_debug_extensions_init_time_ms: totalTimeMs,
+            })
         }
     }
 
diff --git a/packages/browser/src/request-queue.ts b/packages/browser/src/request-queue.ts
@@ -3,6 +3,7 @@ import { each } from './utils'
 
 import { isArray, isUndefined, clampToRange } from '@posthog/core'
 import { logger } from './utils/logger'
+import { processWithYield } from './utils/task-queue'
 
 export const DEFAULT_FLUSH_INTERVAL_MS = 3000
 
@@ -57,22 +58,27 @@ export class RequestQueue {
         if (this._isPaused) {
             return
         }
-        this._flushTimeout = setTimeout(() => {
+        this._flushTimeout = setTimeout(async () => {
             this._clearFlushTimeout()
             if (this._queue.length > 0) {
                 const requests = this._formatQueue()
-                for (const key in requests) {
-                    const req = requests[key]
-                    const now = new Date().getTime()
+                const requestEntries = Object.entries(requests)
+                const now = new Date().getTime()
 
-                    if (req.data && isArray(req.data)) {
-                        each(req.data, (data) => {
-                            data['offset'] = Math.abs(data['timestamp'] - now)
-                            delete data['timestamp']
-                        })
-                    }
-                    this._sendRequest(req)
-                }
+                // Process timestamp updates with yielding for large batches
+                await processWithYield(
+                    requestEntries,
+                    ([, req]) => {
+                        if (req.data && isArray(req.data)) {
+                            each(req.data, (data) => {
+                                data['offset'] = Math.abs(data['timestamp'] - now)
+                                delete data['timestamp']
+                            })
+                        }
+                        this._sendRequest(req)
+                    },
+                    { timeBudgetMs: 30 }
+                )
             }
         }, this._flushTimeoutMs)
     }
diff --git a/packages/browser/src/retry-queue.ts b/packages/browser/src/retry-queue.ts
@@ -6,6 +6,7 @@ import { window } from './utils/globals'
 import { PostHog } from './posthog-core'
 import { extendURLParams } from './request'
 import { addEventListener } from './utils'
+import { processWithYield } from './utils/task-queue'
 
 const thirtyMinutes = 30 * 60 * 1000
 
@@ -142,9 +143,11 @@ export class RetryQueue {
         this._queue = notToFlush
 
         if (toFlush.length > 0) {
-            for (const { requestOptions } of toFlush) {
-                this.retriableRequest(requestOptions)
-            }
+            // Process retry requests with yielding to avoid blocking on large queues
+            // Fire-and-forget: each retry is independent
+            processWithYield(toFlush, ({ requestOptions }) => this.retriableRequest(requestOptions), {
+                timeBudgetMs: 30,
+            })
         }
     }
 
diff --git a/packages/browser/src/site-apps.ts b/packages/browser/src/site-apps.ts
@@ -2,6 +2,7 @@ import { PostHog } from './posthog-core'
 import { CaptureResult, Properties, RemoteConfig, SiteApp, SiteAppGlobals, SiteAppLoader } from './types'
 import { assignableWindow } from './utils/globals'
 import { createLogger } from './utils/logger'
+import { processWithYield } from './utils/task-queue'
 
 const logger = createLogger('[SiteApps]')
 
@@ -88,7 +89,11 @@ export class SiteApps {
         const processBufferedEvents = () => {
             if (!app.errored && this._bufferedInvocations.length) {
                 logger.info(`Processing ${this._bufferedInvocations.length} events for site app with id ${loader.id}`)
-                this._bufferedInvocations.forEach((globals) => app.processEvent?.(globals))
+                // Process buffered events with yielding to avoid blocking on large queues
+                // Fire-and-forget: we mark as processed immediately to stop buffering
+                processWithYield(this._bufferedInvocations, (globals) => app.processEvent?.(globals), {
+                    timeBudgetMs: 30,
+                })
                 app.processedBuffer = true
             }
 
diff --git a/packages/browser/src/utils/__tests__/task-queue.test.ts b/packages/browser/src/utils/__tests__/task-queue.test.ts
diff --git a/packages/browser/src/utils/task-queue.ts b/packages/browser/src/utils/task-queue.ts
diff --git a/packages/browser/terser-mangled-names.json b/packages/browser/terser-mangled-names.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'posthog-js': minor
 +---
++
 +feat: introduce a task queue that will yield to the main thread periodically reducing the impact of long operations