जावास्क्रिप्ट प्रदर्शन
अपने जावास्क्रिप्ट कोड को कैसे तेज करें।
लूप्स में गतिविधि कम करें
प्रोग्रामिंग में अक्सर लूप्स का उपयोग किया जाता है।
लूप में प्रत्येक स्टेटमेंट, जिसमें फॉर स्टेटमेंट भी शामिल है, लूप के प्रत्येक पुनरावृत्ति के लिए निष्पादित किया जाता है।
लूप के बाहर रखे जा सकने वाले स्टेटमेंट या असाइनमेंट से लूप तेजी से चलेगा।
खराब:
for (let i = 0; i < arr.length; i++) {
बेहतर कोड:
let l = arr.length;
for (let i = 0; i < l; i++) {
हर बार लूप के पुनरावृत्त होने पर खराब कोड किसी सरणी की लंबाई संपत्ति तक पहुंचता है।
बेहतर कोड लूप के बाहर की लंबाई की संपत्ति तक पहुंचता है और लूप को तेजी से चलाता है।
डोम एक्सेस कम करें
अन्य JavaScript कथनों की तुलना में HTML DOM तक पहुंचना बहुत धीमा है।
यदि आप एक DOM तत्व को कई बार एक्सेस करने की अपेक्षा करते हैं, तो इसे एक बार एक्सेस करें, और इसे स्थानीय चर के रूप में उपयोग करें:
उदाहरण
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
डोम आकार कम करें
HTML DOM में एलीमेंट की संख्या कम रखें।
यह हमेशा पेज लोडिंग में सुधार करेगा, और विशेष रूप से छोटे उपकरणों पर रेंडरिंग (पेज डिस्प्ले) को गति देगा।
DOM को खोजने का हर प्रयास (जैसे getElementsByTagName) एक छोटे DOM से लाभान्वित होगा।
अनावश्यक चर से बचें
यदि आप मूल्यों को सहेजने की योजना नहीं बनाते हैं तो नए चर न बनाएं।
अक्सर आप इस तरह के कोड को बदल सकते हैं:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
इसके साथ ही:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
विलंब जावास्क्रिप्ट लोड हो रहा है
अपनी स्क्रिप्ट को पृष्ठ के मुख्य भाग के नीचे रखकर ब्राउज़र को पहले पृष्ठ लोड करने देता है।
जब एक स्क्रिप्ट डाउनलोड हो रही है, ब्राउज़र कोई अन्य डाउनलोड शुरू नहीं करेगा। इसके अलावा सभी पार्सिंग और रेंडरिंग गतिविधि को अवरुद्ध किया जा सकता है।
HTTP विनिर्देश परिभाषित करता है कि ब्राउज़र को समानांतर में दो से अधिक घटकों को डाउनलोड नहीं करना चाहिए।
एक विकल्प defer="true"
स्क्रिप्ट टैग में उपयोग करना है। defer विशेषता निर्दिष्ट करती है कि पृष्ठ को पार्स करने के बाद स्क्रिप्ट को निष्पादित किया जाना चाहिए, लेकिन यह केवल बाहरी स्क्रिप्ट के लिए काम करता है।
यदि संभव हो, तो पेज लोड होने के बाद, आप अपनी स्क्रिप्ट को कोड द्वारा पेज पर जोड़ सकते हैं:
उदाहरण
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
के साथ प्रयोग करने से बचें
with
कीवर्ड का उपयोग करने से बचें । इसका गति पर नकारात्मक प्रभाव पड़ता है। यह जावास्क्रिप्ट स्कोप को भी बंद कर देता है।
सख्त मोड में with
कीवर्ड की अनुमति नहीं है।