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