javascript / expert
Snippet
Lange Tasks unterbrechen mit scheduler.yield
Moderne Browser-Scheduler bieten scheduler.yield() an, um langlaufende JavaScript-Tasks zu unterbrechen. Im Gegensatz zu setTimeout(0) priorisiert es den Abschluss des aktuellen Workflows, während der Browser dennoch kritische UI-Interaktionen und Rendering-Frames verarbeiten kann, was 'Jank' verhindert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function processLargeDataset(data) {for (let i = 0; i < data.length; i++) {performHeavyCalculation(data[i]);if (i % 50 === 0 && 'scheduler' in window) {// Yield control back to the main threadawait scheduler.yield();}}}function performHeavyCalculation(item) {const start = performance.now();while (performance.now() - start < 5) {} // Simulate 5ms work}
nextjs
Erklärung
1
await scheduler.yield()
Pausiert die Ausführung, damit der Browser hochpriorisierte Aufgaben wie Input-Events verarbeiten kann.
2
if (i % 50 === 0)
Strategisches Nachgeben alle 50 Iterationen, um Durchsatz und Reaktionsfähigkeit auszubalancieren.