feat: use yielding to main thread in more places

pauldambra · pauldambra · commit 5b464a35eee3 · 2025-11-15T12:47:46.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,
@@ -552,7 +553,7 @@ export class LazyLoadedSessionRecording implements LazyLoadedSessionRecordingInt
         }
     }
 
-    private _processQueuedEvents() {
+    private async _processQueuedEvents() {
         if (this._queuedRRWebEvents.length) {
             // if rrweb isn't ready to accept events earlier, then we queued them up.
             // now that `emit` has been called rrweb should be ready to accept them.
@@ -566,11 +567,17 @@ export class LazyLoadedSessionRecording implements LazyLoadedSessionRecordingInt
             // and try to identify more about when it is failing
             const itemsToProcess = [...this._queuedRRWebEvents]
             this._queuedRRWebEvents = []
-            itemsToProcess.forEach((queuedRRWebEvent) => {
-                if (Date.now() - queuedRRWebEvent.enqueuedAt <= TWO_SECONDS) {
-                    this._tryRRWebMethod(queuedRRWebEvent)
-                }
-            })
+
+            // Process queued events with yielding to avoid blocking on large queues
+            await processWithYield(
+                itemsToProcess,
+                (queuedRRWebEvent) => {
+                    if (Date.now() - queuedRRWebEvent.enqueuedAt <= TWO_SECONDS) {
+                        this._tryRRWebMethod(queuedRRWebEvent)
+                    }
+                },
+                { timeBudgetMs: 30 }
+            )
         }
     }
 
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/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

-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