JavaScript निष्पादन ऑप्टिमाइज़ करें

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

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

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

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

खास जानकारी

• विज़ुअल अपडेट के लिए setTimeout या setInterval से बचें; इसके बजाय, हमेशा requestAnimationFrame का इस्तेमाल करें.
• लंबे समय से चल रहे JavaScript को मुख्य थ्रेड से बाहर ले जाकर, Web Workers पर ले जाएं.
• कई फ़्रेम पर डीओएम बदलाव करने के लिए, माइक्रो-टास्क का इस्तेमाल करें.
• JavaScript के असर का आकलन करने के लिए, Chrome DevTools की टाइमलाइन और JavaScript प्रोफ़ाइलर का इस्तेमाल करें.

विज़ुअल बदलावों के लिए requestAnimationFrame का इस्तेमाल करें

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

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

फ़्रेमवर्क या सैंपल, ऐनिमेशन, जैसे विज़ुअल बदलाव करने के लिए setTimeout या setInterval का इस्तेमाल कर सकते हैं, लेकिन इसमें समस्या यह है कि कॉलबैक फ़्रेम में कुछ पॉइंट पर चलेगा. यह शायद सही है विज्ञापन, अक्सर किसी फ़्रेम से छूट सकता है. इस वजह से जैंक भी हो सकता है.

असल में, jQuery के लिए animate के काम करने के तरीके के लिए setTimeout का इस्तेमाल किया जाता है. इसे बदलकर इस्तेमाल किया गया requestAnimationFrame वर्शन 3 में. अगर jQuery का पुराना वर्शन इस्तेमाल किया जा रहा है, तो requestAnimationFrame का इस्तेमाल करने के लिए इसे पैच करें, हमारा सुझाव है कि आप ऐसा करें.

जटिलता को कम करें या वेब वर्कर का इस्तेमाल करें

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

आपको इस बात पर ध्यान देना चाहिए कि JavaScript कब और कितनी देर तक काम करती है. उदाहरण के लिए, अगर आप किसी ऐनिमेशन का इस्तेमाल किया है, तो आपको आम तौर पर अपने JavaScript को 3-4 मि॰से॰ का क्षेत्र. इससे ज़्यादा समय लगने पर, ज़्यादा समय लग सकता है. अगर डिवाइस कुछ समय से इस्तेमाल में नहीं है, तो समय है, तो आप इस समय ज़्यादा आराम कर सकते हैं.

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

var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);

// The main thread is now free to continue working on other things...

dataSortWorker.addEventListener('message', function(evt) {
    var sortedData = evt.data;
    // Update data on screen...
});

सभी काम इस मॉडल में फ़िट नहीं हो सकते: वेब वर्कर के पास डीओएम ऐक्सेस नहीं है. जहां आपका काम मुख्य थ्रेड पर होना चाहिए वहां बैच बनाने का तरीका इस्तेमाल करें. इसमें बड़े टास्क को माइक्रो-टास्क में बांटा जाता है. हर टास्क में कुछ मिलीसेकंड से ज़्यादा समय नहीं लगता है और उसे हर फ़्रेम में requestAnimationFrame हैंडलर के अंदर चलाया जाता है.

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

अपने JavaScript के “फ़्रेम टैक्स” के बारे में जानें

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

Chrome DevTools का परफ़ॉर्मेंस पैनल, JavaScript की लागत. आम तौर पर, आपको इस तरह के कम-लेवल के रिकॉर्ड मिलते हैं:

मुख्य सेक्शन में, JavaScript कॉल का फ़्लेम चार्ट दिखाया जाता है. इससे यह विश्लेषण कर सकता है कि कौनसे फ़ंक्शन कॉल किए गए और हर फ़ंक्शन को कितना समय लगा.

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

इस्तेमाल करने का तरीका जानने के लिए, रनटाइम की परफ़ॉर्मेंस का विश्लेषण करना शुरू करें लेख देखें परफ़ॉर्मेंस पैनल.

अपने JavaScript को माइक्रो-ऑप्टिमाइज़ करने से बचें

यह जानना मज़ेदार हो सकता है कि ब्राउज़र किसी चीज़ के एक वर्शन को इससे 100 गुना तेज़ी से निष्पादित कर सकता है उदाहरण के लिए, किसी एलिमेंट के offsetTop का अनुरोध करना, कंप्यूटिंग से ज़्यादा तेज़ होता है getBoundingClientRect(), लेकिन यह हमेशा सच है कि इस तरह के कॉल करने पर आपको इन फ़्रेम को कम संख्या में बार-बार देखा जा सकता है, इसलिए इस पहलू पर ध्यान देना आम तौर पर बेकार की कोशिश होती है JavaScript की परफ़ॉर्मेंस. आम तौर पर, आपको सिर्फ़ मिलीसेकंड के कुछ हिस्से सेव करने होंगे.

अगर आप कोई गेम बना रहे हैं या कोई ऐसा ऐप्लिकेशन बना रहे हैं जिसकी गणना करनी होती है, तो आप कहा जाएगा, क्योंकि आम तौर पर बहुत सारी कैलकुलेशन को एक ही फ़्रेम में पूरा किया जा सकता है. तो हर चीज़ मदद कर सकती है.

कम शब्दों में कहें, तो आपको माइक्रो-ऑप्टिमाइज़ेशन के बारे में बहुत सतर्क रहना चाहिए, क्योंकि वे आम तौर पर ऐप्लिकेशन कैसे बनाया जा रहा है.