תכונות אינטרנט:
Scheduler API
חישובים כבדים או לולאות ארוכות יכולים לחסום את ה-thread הראשי, ולגרום לדף להפסיק להגיב. כדי למנוע את זה, צריך להחזיר את השליטה לדפדפן מדי פעם. scheduler.yield() API מאפשר להשהות משימה שנמשכת הרבה זמן ולתת לדפדפן לטפל בקלט של המשתמש או ברינדור לפני שממשיכים.
פיצול משימות שנמשכות הרבה זמן
כדי לפצל את העבודה, משתמשים ב-scheduler.yield() בתוך פונקציות אסינכרוניות.
async function processLargeArray(items) {
// DO: Set a time-based deadline 50 milliseconds into the future. 50
// milliseconds is the boundary for when a task becomes a long task.
let deadline = performance.now() + 50; // 50ms budget
for (const item of items) {
// Process the item
processItem(item);
// MANDATORY: Yield to the main thread periodically to keep the UI
// responsive. This can be done by checking if the deadline set earlier
// has been exceeded. When it has been, yield, then reset the deadline
// another 50 milliseconds into the future.
if (performance.now() >= deadline) {
await scheduler.yield();
deadline = performance.now() + 50;
}
}
}
אסטרטגיות חלופיות
יכול להיות שחלק מהדפדפנים לא תומכים ב-API של scheduler. חובה להטמיע חלופה באמצעות setTimeout כדי לוודא שהקוד פועל בלי תקלות.
חלופה ל-scheduler.yield()
async function processLargeArrayWithFallback(items) {
// DO: Set a time-based deadline 50 milliseconds into the future.
let deadline = performance.now() + 50;
for (const item of items) {
processItem(item);
// MANDATORY: Yield to the main thread periodically to keep the UI responsive.
if (performance.now() >= deadline) {
// DO: Feature detect scheduler.yield
if ('scheduler' in window && 'yield' in window.scheduler) {
await scheduler.yield();
} else {
// DO: Fallback to setTimeout for older browsers
await new Promise(resolve => setTimeout(resolve, 0));
}
deadline = performance.now() + 50;
}
}
}