struxadotcloud/struxa

public

initial commitd4cb9e15 months ago104 lines · 2.6 KB

1	---
2	title: Defer Non-Critical Work with requestIdleCallback
3	impact: MEDIUM
4	impactDescription: keeps UI responsive during background tasks
5	tags: javascript, performance, idle, scheduling, analytics
6	---
7
8	## Defer Non-Critical Work with requestIdleCallback
9
10	Impact: MEDIUM (keeps UI responsive during background tasks)
11
12	Use `requestIdleCallback()` to schedule non-critical work during browser idle periods. This keeps the main thread free for user interactions and animations, reducing jank and improving perceived performance.
13
14	Incorrect (blocks main thread during user interaction):
15
16	```typescript
17	function handleSearch(query:
18	const results =
19	setResults(results);
20
21	// These block the main thread immediately
22	analytics.track("search
23	saveToRecentSearches(query);
24	prefetchTopResults(results.slice
25	}
26	```
27
28	Correct (defers non-critical work to idle time):
29
30	```typescript
31	function handleSearch(query:
32	const results =
33	setResults(results);
34
35	// Defer non-critical work to idle periods
36	requestIdleCallback(() =>
37	analytics.track("search
38	});
39
40	requestIdleCallback(() =>
41	saveToRecentSearches(query);
42	});
43
44	requestIdleCallback(() =>
45	prefetchTopResults(results.slice
46	});
47	}
48	```
49
50	With timeout for required work:
51
52	```typescript
53	// Ensure analytics fires within 2 seconds even if browser stays busy
54	requestIdleCallback(() => analytics
55	timeout: 2000,
56	});
57	```
58
59	Chunking large tasks:
60
61	```typescript
62	function processLargeDataset(items:
63	let index =
64
65	function processChunk(deadline
66	// Process items while we have idle time (aim for <50ms chunks)
67	while (index <
68	processItem(items[index
69	index++;
70	}
71
72	// Schedule next chunk if more items remain
73	if (index <
74	requestIdleCallback(processChunk);
75	}
76	}
77
78	requestIdleCallback(processChunk);
79	}
80	```
81
82	With fallback for unsupported browsers:
83
84	```typescript
85	const scheduleIdleWork = window
86
87	scheduleIdleWork(() => {
88	// Non-critical work
89	});
90	```
91
92	When to use:
93
94	- Analytics and telemetry
95	- Saving state to localStorage/IndexedDB
96	- Prefetching resources for likely next actions
97	- Processing non-urgent data transformations
98	- Lazy initialization of non-critical features
99
100	When NOT to use:
101
102	- User-initiated actions that need immediate feedback
103	- Rendering updates the user is waiting for
104	- Time-sensitive operations