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