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

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

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

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

हालांकि, अपने ऐप्लिकेशन में JavaScript को बेहतर तरीके से इस्तेमाल करने के लिए, कुछ काम किए जा सकते हैं.

खास जानकारी

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

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

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

/**
    * 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 का इस्तेमाल किया जा सकता है. हालांकि, इसकी समस्या यह है कि कॉलबैक फ़्रेम में किसी बिंदु पर चलेगा, शायद आखिर में. इससे अक्सर ऐसा हो सकता है कि हम एक फ़्रेम को न देख पाएं और वीडियो में रुकावट आ जाए.