जटिल वेब ऐप्लिकेशन बनाते समय, टास्क की प्राथमिकताएं अलग-अलग होती हैं. मौजूदा व्यू के लिए टास्क पूरे करना, आंकड़े भेजने या ऐसेट को पहले से फ़ेच करने से ज़्यादा ज़रूरी है. Prioritized Task Scheduling API की मदद से, टास्क को उनकी प्राथमिकता के हिसाब से शेड्यूल किया जा सकता है. इससे यह पक्का किया जाता है कि ब्राउज़र, उपयोगकर्ता के इनपुट के हिसाब से काम करता रहे.
प्राथमिकता के हिसाब से टास्क शेड्यूल करना
scheduler.postTask() का इस्तेमाल करके, टास्क को तीन प्राथमिकताओं में से किसी एक के साथ शेड्यूल करें:
user-blocking: ऐसे टास्क जो उपयोगकर्ता के इंटरैक्शन को ब्लॉक करते हैं. जैसे, इनपुट हैंडलिंग, ज़रूरी रेंडरिंग.user-visible: उपयोगकर्ता को टास्क दिखते हैं, लेकिन वे ब्लॉक नहीं होते (डिफ़ॉल्ट).background: ऐसे टास्क जो समय के हिसाब से ज़रूरी नहीं हैं. जैसे, आंकड़े, प्रीफ़ेच करना.
// Schedule a high-priority task that blocks user interaction
scheduler.postTask(() => {
// DO: Handle critical updates that impact user interaction
handleCriticalUpdate();
}, { priority: 'user-blocking' });
// Schedule a default priority task
scheduler.postTask(() => {
// DO: Render non-critical content that is visible to the user
renderSecondaryContent();
}); // Defaults to 'user-visible'
// Schedule a low-priority background task
scheduler.postTask(() => {
// DO: Perform heavy background work that is not time-critical
sendAnalytics();
}, { priority: 'background' });
फ़ॉलबैक रणनीतियां
जिन ब्राउज़र में Prioritized Task Scheduling API नहीं है उनमें टास्क की प्राथमिकता बनाए रखने के लिए, आपको पॉलीफ़िल का इस्तेमाल करना होगा.
// Feature detect the scheduler API
if (!('scheduler' in window && 'postTask' in window.scheduler)) {
// DO: Conditionally load the polyfill for browsers that need it
const script = document.createElement('script');
script.src = 'https://unpkg.com/scheduler-polyfill';
script.onload = () => {
// Polyfill is loaded and ready to use
runScheduledTasks();
};
document.head.appendChild(script);
} else {
runScheduledTasks();
}
function runScheduledTasks() {
// Now safe to use scheduler.postTask in all browsers
scheduler.postTask(() => {
console.log('Task with priority support');
}, { priority: 'background' });
}