बड़ा डीओएम ट्री कई तरीकों से आपके पेज की परफ़ॉर्मेंस को धीमा कर सकता है:
नेटवर्क की परफ़ॉर्मेंस और लोड करने की स्पीड
बड़े डीओएम ट्री में अक्सर कई ऐसे नोड शामिल होते हैं जो उपयोगकर्ता के पेज को पहली बार लोड करने पर नहीं दिखते. इससे आपके उपयोगकर्ताओं के लिए डेटा की लागत बढ़ जाती है और पेज लोड होने में ज़्यादा समय लगता है.
रनटाइम की परफ़ॉर्मेंस
जब उपयोगकर्ता और स्क्रिप्ट आपके पेज से इंटरैक्ट करती हैं, तो ब्राउज़र को लगातार नोड की पोज़िशन और स्टाइल को फिर से कैलकुलेट करना पड़ता है. जटिल स्टाइल नियमों के साथ बड़े DOM ट्री की वजह से, रेंडरिंग और इंटरैक्टिविटी बहुत धीमी हो सकती है.
मेमोरी की परफ़ॉर्मेंस
अगर आपका JavaScript,
document.querySelectorAll('li')जैसे सामान्य क्वेरी सिलेक्टर का इस्तेमाल करता है, तो हो सकता है कि आप अनजाने में बहुत ज़्यादा नोड के रेफ़रंस सेव कर रहे हों. इससे, आपके उपयोगकर्ताओं के डिवाइसों की मेमोरी क्षमता पर असर पड़ सकता है.
Lighthouse के डीओएम साइज़ के ऑडिट के फ़ेल होने का तरीका
Lighthouse, किसी पेज के कुल डीओएम एलिमेंट, पेज की ज़्यादा से ज़्यादा डीओएम डेप्थ, और उसके ज़्यादा से ज़्यादा चाइल्ड एलिमेंट की जानकारी देता है:
लाइटहाउस उन डीओएम ट्री वाले पेजों को फ़्लैग करता है जो:
- जब बॉडी एलिमेंट में 800 से ज़्यादा नोड होते हैं, तब चेतावनी दी जाती है.
- बॉडी एलिमेंट में ~1,400 से ज़्यादा नोड होने पर गड़बड़ियां हुईं.
DOM साइज़ को ऑप्टिमाइज़ करने का तरीका
आम तौर पर, सिर्फ़ ज़रूरत पड़ने पर DOM नोड बनाने के तरीके खोजें और जब उनकी ज़रूरत न हो, तब उन्हें मिटा दें.
अगर आपको एक बड़ा डीओएम ट्री शिप करना है, तो अपना पेज लोड करने की कोशिश करें और मैन्युअल तरीके से नोट करें कि कौनसे नोड दिख रहे हैं. शायद आप शुरुआत में लोड किए गए दस्तावेज़ से ऐसे नोड हटा सकते हैं जो नहीं दिखाए गए हैं और उन्हें सिर्फ़ उपयोगकर्ता के इंटरैक्शन के बाद बनाएं. जैसे, स्क्रोल करना या बटन पर क्लिक करना.
अगर रनटाइम के दौरान डीओएम नोड बनाए जाते हैं, तो सबट्री में बदलाव से जुड़े डीओएम में बदलाव के ब्रेकपॉइंट से, आपको यह पता लगाने में मदद मिल सकती है कि नोड कब बनाए गए.
अगर बड़े DOM ट्री से बचा नहीं जा सकता, तो रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाने के लिए, सीएसएस सिलेक्टर को आसान बनाएं. ज़्यादा जानकारी के लिए, Google की स्टाइल कैलकुलेशन का दायरा और जटिलता कम करें देखें.
ज़्यादा जानकारी के लिए, बड़े डीओएम साइज़ का इंटरैक्टिविटी पर क्या असर पड़ता है और इस बारे में क्या किया जा सकता है लेख पढ़ें.
स्टैक के लिए सलाह
Angular
अगर बड़ी सूचियां रेंडर की जा रही हैं, तो कॉम्पोनेंट डेवलपमेंट किट (सीडीके) के साथ वर्चुअल स्क्रोलिंग का इस्तेमाल करें.
React
- अगर पेज पर कई एलिमेंट एक से ज़्यादा बार रेंडर किए जा रहे हैं, तो बनाए गए डीओएम नोड की संख्या कम करने के लिए,
react-windowजैसी "windowing" लाइब्रेरी का इस्तेमाल करें. - ज़रूरत न होने पर बार-बार रेंडर करने से बचने के लिए,
shouldComponentUpdate,PureComponentयाReact.memoका इस्तेमाल करें. - इफ़ेक्ट छोड़ें का इस्तेमाल तब तक करें, जब तक कुछ और करने की ज़रूरत न हो. साथ ही, जब रनटाइम परफ़ॉर्मेंस को बेहतर बनाने के लिए
Effectहुक का इस्तेमाल किया जा रहा हो.