लॉन्ग टास्क, JavaScript कोड होता है. यह मुख्य थ्रेड का लंबे समय तक एक ही इस्तेमाल करता है. इसकी वजह से यूज़र इंटरफ़ेस (यूआई) "फ़्रीज़" हो जाता है.
किसी पेज के लोड होने के दौरान, लंबे टास्क, मुख्य थ्रेड को जोड़ सकते हैं. साथ ही, पेज तैयार होने पर भी, वह उपयोगकर्ता के इनपुट के हिसाब से काम नहीं कर सकता. क्लिक और टैप अक्सर काम नहीं करते हैं, क्योंकि इवेंट लिसनर और क्लिक हैंडलर जैसी इंटरैक्टिव सुविधाएं अभी तक यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साथ अटैच नहीं की गई हैं. इस वजह से, लंबे टास्क, इंटरैक्टिव में लगने वाले समय को काफ़ी बढ़ा सकते हैं.
Chrome DevTools अब लंबे टास्क को विज़ुअलाइज़ कर सकता है. इससे उन टास्क को देखना आसान हो जाएगा जिन्हें ऑप्टिमाइज़ करना ज़रूरी है.
लॉन्ग टास्क, किस तरह के होते हैं?
सीपीयू में बहुत ज़्यादा लोड होने वाले टास्क, जटिल काम की वजह से होते हैं. इनमें 50 मि॰से॰ से ज़्यादा समय लगता है. आरआईएल मॉडल आपको उपयोगकर्ता के इनपुट इवेंट को 50 मि॰से॰ में प्रोसेस करने का सुझाव देता है, ताकि 100 मि॰से॰ में जवाब दिख सके. साथ ही, कार्रवाई और प्रतिक्रिया के बीच कनेक्शन बना रहे.
अहम जानकारी: आरएआईएल मॉडल आपको 100 मि॰से॰ के अंदर उपयोगकर्ता के इनपुट का विज़ुअल रिस्पॉन्स देने का सुझाव देता है. हालांकि, इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) मेट्रिक के थ्रेशोल्ड से 200 मि॰से॰ तक का डेटा इकट्ठा किया जा सकता है. इससे खास तौर पर धीमे डिवाइसों के लिए, उपयोगकर्ताओं के लिए ज़्यादा से ज़्यादा उम्मीदें तय की जा सकती हैं.
क्या मेरे पेज पर लंबे टास्क हैं, जिससे बातचीत में देरी हो सकती है?
अब तक, आपको Chrome DevTools में 50 मि॰से॰ से ज़्यादा लंबी स्क्रिप्ट के "लंबे पीले रंग के ब्लॉक" मैन्युअल तरीके से खोजना पड़ता था या Long Tasks API का इस्तेमाल करके यह पता लगाया जाता है कि किन टास्क की वजह से, इंटरैक्टिविटी में देरी हो रही है.
परफ़ॉर्मेंस ऑडिटिंग वर्कफ़्लो को आसान बनाने के लिए, DevTool अब लंबे टास्क को विज़ुअलाइज़ करता है. अगर टास्क लंबे टास्क हैं, तो उनमें लाल रंग के फ़्लैग दिखेंगे. ये स्लेटी रंग में दिखाए गए हैं.
नए विज़ुअलाइज़ेशन टूल का इस्तेमाल करने के लिए:
- वेब पेज लोड करने के परफ़ॉर्मेंस पैनल में ट्रेस रिकॉर्ड करें.
- मुख्य थ्रेड के व्यू में लाल फ़्लैग देखें. आपको दिखेगा कि टास्क, स्लेटी रंग से मार्क किए गए हैं और टास्क के तौर पर लेबल किए गए हैं.
- अपने पॉइंटर को स्लेटी रंग के बार पर रखें. आपको एक डायलॉग दिखेगा. इसमें टास्क की अवधि बताया जाएगा. साथ ही, यह जानकारी भी दिखेगी कि क्या उसे लंबे टास्क माना जा सकता है.
मैंने जिन टास्क को ज़्यादा समय तक प्रोसेस करने की कोशिश की है उनकी वजह क्या है?
लंबे टास्क की वजह का पता लगाने के लिए, स्लेटी रंग के टास्क बार को चुनें. नीचे मौजूद ड्रॉइंग में, बॉटम-अप और गतिविधि के हिसाब से ग्रुप बनाएं को चुनें. इससे यह देखा जा सकता है कि किसी टास्क को पूरा करने में, किन गतिविधियों (कुल) का सबसे ज़्यादा समय लगा. नीचे दिए गए उदाहरण में, देरी की वजह DOM क्वेरी के महंगे सेट की तरह लग रही है.
लंबे टास्क को ऑप्टिमाइज़ करने के आम तरीके क्या हैं?
बड़ी स्क्रिप्ट, अक्सर लंबे टास्क की मुख्य वजह होती हैं. उन्हें अलग-अलग हिस्सों में बांटें. तीसरे पक्ष की स्क्रिप्ट पर भी ध्यान दें. इनमें ऐसे लॉन्ग टास्क भी हो सकते हैं जो मुख्य कॉन्टेंट के इंटरैक्टिव होने में देरी करते हैं.
अपने सारे कामों को 50 मि॰से॰ से कम समय में पूरा करें. इसके बाद, उन्हें सही जगह और सही समय पर पूरा करें. उनमें से कुछ के लिए सबसे सही जगह, सर्विस वर्कर में मुख्य थ्रेड के बाहर हो सकती है. लंबे टास्क को छोटे-छोटे टास्क में बांटने के बारे में जानकारी पाने के लिए, लंबे टास्क को ऑप्टिमाइज़ करें और फ़िल वॉल्टन के लंबे समय तक काम न करने वाले टास्क देखें.
अपने पेजों को रिस्पॉन्सिव रखें. लंबे टास्क को कम करना, यह पक्का करने का शानदार तरीका है कि जब लोग आपकी साइट पर आएं, तो उन्हें उनका अनुभव अच्छा मिले. लॉन्ग टास्क के बारे में ज़्यादा जानकारी के लिए, उपयोगकर्ता के बारे में बनाई गई परफ़ॉर्मेंस मेट्रिक देखें.