लंबे टास्क ऑप्टिमाइज़ करें

तुम्हें कहा गया है कि "मुख्य थ्रेड को ब्लॉक न करो" और "लंबे टास्क हटाओ", लेकिन ऐसा करने का क्या मतलब है?

JavaScript ऐप्लिकेशन को तेज़ी से चालू रखने के बारे में आम तौर पर दी जाने वाली सलाह, इन सुझावों पर अमल करती है:

• "मुख्य थ्रेड को ब्लॉक न करें."
• "अपने लंबे कामों को अलग-अलग करें."

यह अच्छी सलाह है, लेकिन इसमें क्या-क्या शामिल है? शिपिंग कम JavaScript अच्छी है, लेकिन क्या यह अपने-आप ज़्यादा रिस्पॉन्सिव यूज़र इंटरफ़ेस में शामिल हो जाता है? हो सकता है, लेकिन नहीं भी.

JavaScript में टास्क को ऑप्टिमाइज़ करने का तरीका समझने के लिए, आपको सबसे पहले यह जानना होगा कि टास्क क्या हैं और ब्राउज़र उन्हें कैसे मैनेज करता है.

टास्क क्या होता है?

टास्क, ब्राउज़र पर किए जाने वाले अलग-अलग काम को कहते हैं. इसमें रेंडर करना, एचटीएमएल और सीएसएस को पार्स करना, JavaScript चलाना, और ऐसे दूसरे काम शामिल हैं जिन पर शायद आपका सीधा कंट्रोल न हो. इन सभी में से, शायद आपकी लिखी हुई JavaScript टास्क का सबसे बड़ा सोर्स है.

JavaScript से जुड़े टास्क, परफ़ॉर्मेंस पर कई तरीकों से असर डालते हैं:

• जब कोई ब्राउज़र, शुरू होने के दौरान किसी JavaScript फ़ाइल को डाउनलोड करता है, तो वह उस JavaScript को पार्स और कंपाइल करने के लिए टास्क की सूची बनाता है, ताकि बाद में उसे चलाया जा सके.
• पेज पर बने रहने के दौरान, अलग-अलग समय पर, JavaScript के काम करने पर टास्क की सूची बना दी जाती है. जैसे, इवेंट हैंडलर, JavaScript की मदद से चलने वाले ऐनिमेशन, और Analytics कलेक्शन जैसी बैकग्राउंड में होने वाली गतिविधि की मदद से इंटरैक्शन बढ़ाना.

वेब वर्कर और इससे मिलते-जुलते एपीआई को छोड़कर, ये सभी चीज़ें मुख्य थ्रेड पर लागू होती हैं.

मुख्य थ्रेड क्या है?

मुख्य थ्रेड वह जगह होती है जहां ब्राउज़र में ज़्यादातर टास्क चलते हैं. साथ ही, यहां आपकी लिखी गई करीब-करीब सभी JavaScript लागू होती हैं.

मुख्य थ्रेड एक बार में सिर्फ़ एक टास्क पर कार्रवाई कर सकती है. जिस टास्क की अवधि 50 मिलीसेकंड से ज़्यादा होती है उसे लंबे टास्क के तौर पर लेबल किया जाता है. 50 मिलीसेकंड से ज़्यादा लंबे टास्क के कुल समय में से 50 मिलीसेकंड को घटाकर, उस टास्क को ब्लॉक करने की अवधि कहा जाता है.

जब तक किसी तय अवधि का टास्क चल रहा हो, तब तक ब्राउज़र इंटरैक्शन को रोक देता है. हालांकि, अगर कोई टास्क लंबे समय तक नहीं चल रहा हो, तो यह उपयोगकर्ता को नहीं दिखता. जब कई लंबे टास्क होने पर कोई उपयोगकर्ता किसी पेज से इंटरैक्ट करने की कोशिश करता है, तो यूज़र इंटरफ़ेस काम नहीं करेगा. मुख्य थ्रेड के बहुत लंबे समय के लिए ब्लॉक होने पर, हो सकता है कि यूज़र इंटरफ़ेस काम न करे.

मुख्य थ्रेड को लंबे समय तक ब्लॉक होने से बचाने के लिए, लंबे टास्क को कई छोटे-छोटे टास्क में बांटा जा सकता है.

यह इसलिए ज़रूरी है, क्योंकि जब टास्क बंटे होते हैं, तब ब्राउज़र ज़्यादा प्राथमिकता वाले काम का जवाब जल्दी दे पाता है. इसमें उपयोगकर्ता के इंटरैक्शन भी शामिल हैं. इसके बाद, बचे हुए टास्क पूरे होने तक चलते हैं. इससे यह पक्का किया जाता है कि सूची में जो काम आपने किया था वह पूरा हो जाए.

ऊपर दिए गए डेटा में सबसे ऊपर, उपयोगकर्ता इंटरैक्शन से सूची में जोड़े गए इवेंट हैंडलर को एक लंबे टास्क के शुरू होने से पहले इंतज़ार करना पड़ता है. इसकी वजह से इंटरैक्शन होने में देरी होती है. इस स्थिति में, उपयोगकर्ता को हो सकता है कि उसमें अंतर दिखे. सबसे नीचे, इवेंट हैंडलर जल्दी काम शुरू कर सकता है और इंटरैक्शन तुरंत महसूस हो सकता है.

अब आपको पता है कि अलग-अलग टास्क को अलग-अलग करना क्यों ज़रूरी है, तो JavaScript में इन्हें करने का तरीका जानें.

टास्क मैनेज करने से जुड़ी रणनीतियां

सॉफ़्टवेयर आर्किटेक्चर में एक सामान्य सलाह यह है कि आप अपने काम को छोटे-छोटे फ़ंक्शन में बांटें:

function saveSettings () {
  validateForm();
  showSpinner();
  saveToDatabase();
  updateUI();
  sendAnalytics();
}

इस उदाहरण में, saveSettings() नाम का एक फ़ंक्शन है, जो किसी फ़ॉर्म की पुष्टि करने, स्पिनर दिखाने, ऐप्लिकेशन बैकएंड पर डेटा भेजने, यूज़र इंटरफ़ेस अपडेट करने, और आंकड़े भेजने के लिए, पांच फ़ंक्शन का इस्तेमाल करता है.

सैद्धांतिक तौर पर, saveSettings() अच्छी तरह से व्यवस्थित है. अगर आपको इनमें से किसी फ़ंक्शन को डीबग करना है, तो प्रोजेक्ट ट्री को एक्सप्लोर करें और यह पता लगाएं कि हर फ़ंक्शन क्या करता है. इस तरह काम को छोटे-छोटे हिस्सों में बांटकर, प्रोजेक्ट पर नेविगेट करना और उन्हें मैनेज करना आसान हो जाता है.

हालांकि, यहां एक संभावित समस्या यह हो सकती है कि JavaScript इनमें से हर फ़ंक्शन को अलग-अलग टास्क के तौर पर नहीं चलाता है, क्योंकि उन्हें saveSettings() फ़ंक्शन में एक्ज़ीक्यूट किया जाता है. इसका मतलब है कि सभी पांच फ़ंक्शन एक ही टास्क के तौर पर चलेंगे.

सबसे अच्छी स्थिति में, इनमें से कोई एक फ़ंक्शन भी टास्क की कुल लंबाई में 50 मिलीसेकंड या उससे ज़्यादा का योगदान दे सकता है. सबसे खराब स्थिति में, इनमें से ज़्यादातर टास्क ज़्यादा समय तक चल सकते हैं. खास तौर पर, सीमित संसाधनों वाले डिवाइसों पर.

कोड चलाने की प्रोसेस को मैन्युअल तरीके से रोकें

टास्क को छोटे-छोटे हिस्सों में बांटने के लिए, डेवलपर ने setTimeout() तरीके का इस्तेमाल किया है. इस तकनीक से, setTimeout() को फ़ंक्शन पास किया जाता है. ऐसा करने से, 0 का टाइम आउट तय होने पर भी, कॉलबैक को किसी दूसरे टास्क में ट्रांसफ़र कर दिया जाता है.

function saveSettings () {
  // Do critical work that is user-visible:
  validateForm();
  showSpinner();
  updateUI();

  // Defer work that isn't user-visible to a separate task:
  setTimeout(() => {
    saveToDatabase();
    sendAnalytics();
  }, 0);
}

इसे यील्डिंग कहा जाता है. यह कई फ़ंक्शन वाले ऐसे फ़ंक्शन के लिए सबसे अच्छा काम करता है जो एक क्रम में चलने चाहिए.

हालांकि, यह ज़रूरी नहीं है कि आपका कोड हमेशा इस तरीके से व्यवस्थित हो. उदाहरण के लिए, हो सकता है कि आपके पास बड़ी मात्रा में डेटा हो, जिसे एक लूप में प्रोसेस करने की ज़रूरत हो और अगर कई बार दोहराया जाए, तो उस काम में बहुत ज़्यादा समय लग सकता है.

function processData () {
  for (const item of largeDataArray) {
    // Process the individual item here.
  }
}

डेवलपर एर्गोनॉमिक्स की वजह से, यहां setTimeout() का इस्तेमाल करने में समस्या होती है. साथ ही, डेटा के पूरे कलेक्शन को प्रोसेस करने में बहुत ज़्यादा समय लग सकता है, भले ही हर बार अलग-अलग काम तेज़ी से किया जाए. इससे बड़ी संख्या में लोग जुड़ते हैं और setTimeout() इस काम के लिए सही टूल नहीं है. कम से कम इस तरीके से इस्तेमाल किए जाने पर तो ऐसा नहीं होता.

यील्ड पॉइंट बनाने के लिए async/await का इस्तेमाल करें

यह पक्का करने के लिए कि उपयोगकर्ता को भी ज़रूरी टास्क, कम प्राथमिकता वाले टास्क से पहले हो जाएं, ब्राउज़र को ज़्यादा ज़रूरी टास्क करने के मौके देने के लिए, टास्क सूची में कुछ रोककर मुख्य थ्रेड पर जाया जा सकता है.

जैसा कि पहले बताया गया है, setTimeout का इस्तेमाल मुख्य थ्रेड पर जाने के लिए किया जा सकता है. आसानी और आसानी से पढ़ने के लिए, setTimeout को Promise के अंदर कॉल करें और इसके resolve तरीके को कॉलबैक के तौर पर पास करें.

function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

yieldToMain() फ़ंक्शन का यह फ़ायदा है कि इसे किसी भी async फ़ंक्शन में await किया जा सकता है. पिछले उदाहरण को ध्यान में रखते हुए, फ़ंक्शन का एक कलेक्शन बनाया जा सकता है, जिसे चलाया जा सकता है और हर एक फ़ंक्शन के चलने के बाद मुख्य थ्रेड पर जा सकता है:

async function saveSettings () {
  // Create an array of functions to run:
  const tasks = [
    validateForm,
    showSpinner,
    saveToDatabase,
    updateUI,
    sendAnalytics
  ]

  // Loop over the tasks:
  while (tasks.length > 0) {
    // Shift the first task off the tasks array:
    const task = tasks.shift();

    // Run the task:
    task();

    // Yield to the main thread:
    await yieldToMain();
  }
}

इस वजह से, पहले मोनोलिथिक टास्क होता है जिसे अब अलग-अलग टास्क में बांट दिया जाता है.

एक खास शेड्यूलर एपीआई

setTimeout, टास्क को अलग-अलग करने का असरदार तरीका है, लेकिन इसकी एक कमी भी हो सकती है: जब बाद के किसी टास्क में चलाने के लिए कोड को टाला जाता है और मुख्य थ्रेड पर भेजा जाता है, तो वह टास्क सूची के आखिरी में जुड़ जाता है.

अगर पेज पर मौजूद सभी कोड आपके कंट्रोल में हैं, तो टास्क को प्राथमिकता देने की सुविधा के साथ खुद का शेड्यूलर बनाया जा सकता है. हालांकि, तीसरे पक्ष की स्क्रिप्ट आपके शेड्यूलर का इस्तेमाल नहीं करेंगी. इस तरह, आप ऐसे माहौल में काम को प्राथमिकता नहीं दे सकते. आप इसे सिर्फ़ अलग-अलग हिस्सों में बांट सकते हैं या उपयोगकर्ता के इंटरैक्शन की वजह से ऐसा कर सकते हैं.

Scheduler API, postTask() फ़ंक्शन की सुविधा देता है. इसकी मदद से, टास्क को सटीक तरीके से शेड्यूल किया जा सकता है. साथ ही, यह एक ऐसा तरीका है जिससे ब्राउज़र को काम की प्राथमिकता तय करने में मदद मिलती है, ताकि कम प्राथमिकता वाले टास्क मुख्य थ्रेड पर काम करें. postTask(), प्रॉमिस का इस्तेमाल करता है और इन तीन priority में से कोई एक सेटिंग स्वीकार करता है:

• सबसे कम प्राथमिकता वाले टास्क के लिए 'background'.
• सामान्य प्राथमिकता वाले टास्क के लिए 'user-visible'. priority सेट न होने पर, यह डिफ़ॉल्ट तौर पर सेट होता है.
• ऐसे ज़रूरी टास्क के लिए 'user-blocking' जिन्हें सबसे ज़्यादा प्राथमिकता पर चलाया जाना चाहिए.

उदाहरण के लिए, यहां दिए गए कोड को लें. इसमें, सबसे ज़्यादा प्राथमिकता वाले तीन टास्क पूरे करने के लिए, postTask() एपीआई का इस्तेमाल किया जाता है. वहीं, बाकी के दो टास्क को सबसे कम प्राथमिकता पर पूरा किया जाता है.

function saveSettings () {
  // Validate the form at high priority
  scheduler.postTask(validateForm, {priority: 'user-blocking'});

  // Show the spinner at high priority:
  scheduler.postTask(showSpinner, {priority: 'user-blocking'});

  // Update the database in the background:
  scheduler.postTask(saveToDatabase, {priority: 'background'});

  // Update the user interface at high priority:
  scheduler.postTask(updateUI, {priority: 'user-blocking'});

  // Send analytics data in the background:
  scheduler.postTask(sendAnalytics, {priority: 'background'});
};

यहां, टास्क की प्राथमिकता इस तरह से शेड्यूल की गई है कि ब्राउज़र की प्राथमिकता वाले टास्क, जैसे कि उपयोगकर्ता इंटरैक्शन, ज़रूरत के हिसाब से काम कर सकें.

यह एक सामान्य उदाहरण है, जिसमें बताया गया है कि postTask() का इस्तेमाल कैसे किया जा सकता है. अलग-अलग TaskController ऑब्जेक्ट को इंस्टैंशिएट किया जा सकता है, जो टास्क के बीच प्राथमिकताएं शेयर कर सकते हैं. इसमें ज़रूरत के हिसाब से अलग-अलग TaskController इंस्टेंस के लिए प्राथमिकताएं बदलने की सुविधा भी शामिल है.

आने वाले scheduler.yield() एपीआई का इस्तेमाल करके, पहले से मौजूद फ़ायदों को जारी रखें

शेड्यूलर एपीआई के अलावा scheduler.yield() का सुझाव भी दिया जाता है. यह ऐसा एपीआई है जिसे खास तौर पर ब्राउज़र में मुख्य थ्रेड पर काम करने के लिए डिज़ाइन किया गया है. इसका इस्तेमाल, इस गाइड में ऊपर बताए गए yieldToMain() फ़ंक्शन जैसा लगता है:

async function saveSettings () {
  // Create an array of functions to run:
  const tasks = [
    validateForm,
    showSpinner,
    saveToDatabase,
    updateUI,
    sendAnalytics
  ]

  // Loop over the tasks:
  while (tasks.length > 0) {
    // Shift the first task off the tasks array:
    const task = tasks.shift();

    // Run the task:
    task();

    // Yield to the main thread with the scheduler
    // API's own yielding mechanism:
    await scheduler.yield();
  }
}

यह कोड काफ़ी हद तक जाना-पहचाना है, लेकिन yieldToMain() के बजाय, यह await scheduler.yield() का इस्तेमाल करता है.

scheduler.yield() का फ़ायदा इसे जारी रखने में होता है. इसका मतलब है कि अगर टास्क के एक सेट के बीच में ही नतीजे मिल जाते हैं, तो शेड्यूल किए गए दूसरे टास्क भी उसी क्रम में चलते रहेंगे जो यील्ड पॉइंट के बाद मिलते हैं. इससे तीसरे पक्ष की स्क्रिप्ट के कोड से, कोड को एक्ज़ीक्यूट होने में किसी तरह की रुकावट डालने से बचा जा सकता है.

user-blocking प्राथमिकता ज़्यादा होने की वजह से, priority: 'user-blocking' के साथ scheduler.postTask() का इस्तेमाल जारी रखने की संभावना काफ़ी ज़्यादा होती है. इसलिए, इस दौरान इस तरीके का इस्तेमाल एक विकल्प के तौर पर किया जा सकता है.

setTimeout() (या scheduler.postTask() के साथ priority: 'user-visibile' या कोई साफ़ तौर पर priority नहीं) का इस्तेमाल करने पर टास्क, सूची के पीछे शेड्यूल हो जाता है. इससे, बचे हुए अन्य टास्क, टास्क जारी रखने से पहले चलाए जा सकते हैं.

isInputPending() का इस्तेमाल न करें

isInputPending() एपीआई की मदद से, यह पता लगाया जा सकता है कि उपयोगकर्ता ने किसी पेज से इंटरैक्ट करने की कोशिश की है या नहीं. यह एपीआई सिर्फ़ तब काम करता है, जब इनपुट बाकी हो.

कोई इनपुट बाकी न होने पर भी JavaScript को काम करने की अनुमति मिलती है. इससे JavaScript लागू होने के बजाय, टास्क की सूची में सबसे आखिर में खत्म हो जाता है. इससे उन साइटों की परफ़ॉर्मेंस में सुधार हो सकता है जो शायद मुख्य थ्रेड में वापस नहीं आतीं. इसके बारे में शिप करने के इरादे में बताया गया है.

हालांकि, इस एपीआई के लॉन्च होने के बाद से, एपीआई को बेहतर बनाने के बारे में हमारी समझ बढ़ गई है. खास तौर पर, आईएनपी लॉन्च होने के बाद. हम अब इस एपीआई का इस्तेमाल करने का सुझाव नहीं देते हैं. इसके बजाय, हम आपको यह सुझाव देते हैं कि इनपुट पाने बाकी है या नहीं. ऐसा कई वजहों से होता है:

• कुछ मामलों में उपयोगकर्ता के इंटरैक्ट करने के बावजूद, isInputPending() गलती से false दिखा सकता है.
• इनपुट ही सिर्फ़ ऐसा मामला नहीं है जिसमें टास्क पूरे किए जाने चाहिए. रिस्पॉन्सिव वेब पेज उपलब्ध कराने के लिए, ऐनिमेशन और अन्य सामान्य यूज़र इंटरफ़ेस अपडेट करना भी ज़रूरी हो सकता है.
• बाद में, बेहतर एपीआई की शुरुआत की गई है. ये एपीआई, समस्याओं को हल करने में मदद करते हैं. जैसे, scheduler.postTask() और scheduler.yield().

नतीजा

टास्क को मैनेज करना मुश्किल होता है. हालांकि, ऐसा करने से यह पक्का होता है कि आपका पेज, उपयोगकर्ताओं के इंटरैक्शन के बारे में ज़्यादा तेज़ी से जानकारी दे. टास्क को मैनेज और प्राथमिकता देने के लिए कोई एक सलाह नहीं है, बल्कि कई अलग-अलग तकनीकों का इस्तेमाल करने की सलाह दी जाती है. याद रखें कि टास्क मैनेज करते समय, आपको इन बातों का ध्यान रखना होगा:

• उपयोगकर्ता को दिए जाने वाले अहम टास्क के लिए, मुख्य थ्रेड पर जवाब दें.
• postTask() की मदद से टास्क को प्राथमिकता दें.
• scheduler.yield() के साथ एक्सपेरिमेंट करें.
• आखिर में, अपने फ़ंक्शन में ज़्यादा से ज़्यादा काम करें.

इनमें से एक या ज़्यादा टूल के साथ, आपको अपने ऐप्लिकेशन में काम करने की सुविधा मिलनी चाहिए, ताकि ऐप्लिकेशन में उपयोगकर्ता की ज़रूरतों को प्राथमिकता दी जा सके. साथ ही, यह भी पक्का किया जा सकेगा कि कम ज़रूरी काम अब भी पूरे हो रहे हों. इससे उपयोगकर्ताओं को बेहतर अनुभव मिलेगा, जो ज़्यादा रिस्पॉन्सिव होगी और इस्तेमाल करने में ज़्यादा दिलचस्प होगी.

इस गाइड को तकनीकी तौर पर जांचने के लिए, फ़िलिप वॉल्टन को विशेष धन्यवाद.

थंबनेल इमेज, अमिराली मीरहाशेमियन के सौजन्य से Unस्प्लैश से ली गई है.