बहुत ज़्यादा DOM साइज़ से बचें

एक बड़ा डीओएम ट्री आपके पेज की परफ़ॉर्मेंस को कई तरीकों से धीमा कर सकता है:

  • नेटवर्क की परफ़ॉर्मेंस और लोड होने की परफ़ॉर्मेंस

    एक बड़े डीओएम ट्री में अक्सर कई ऐसे नोड शामिल होते हैं जो उपयोगकर्ता के पहली बार पेज लोड होने पर नहीं दिखते. इससे आपके उपयोगकर्ताओं का डेटा खर्च बढ़ जाता है और लोड होने में लगने वाला समय धीमा हो जाता है.

  • रनटाइम की परफ़ॉर्मेंस

    जब उपयोगकर्ता और स्क्रिप्ट आपके पेज से इंटरैक्ट करते हैं, तो ब्राउज़र को लगातार नोड की पोज़िशन और स्टाइल का आकलन करना चाहिए. जटिल स्टाइल नियमों के साथ एक बड़ा डीओएम ट्री, रेंडरिंग को बहुत धीमा कर सकता है.

  • मेमोरी की परफ़ॉर्मेंस

    अगर आपके JavaScript में सामान्य क्वेरी सिलेक्टर, जैसे कि document.querySelectorAll('li') का इस्तेमाल किया जाता है, तो हो सकता है कि आपने अनजाने में बहुत ज़्यादा नोड के रेफ़रंस सेव कर दिए हों. इससे आपके उपयोगकर्ताओं के डिवाइसों की मेमोरी पर असर पड़ सकता है.

लाइटहाउस डीओएम के साइज़ का ऑडिट कैसे काम नहीं करता है

Lighthouse किसी पेज के कुल डीओएम एलिमेंट, पेज की ज़्यादा से ज़्यादा डीओएम डेप्थ, और उसके ज़्यादा से ज़्यादा चाइल्ड एलिमेंट को रिपोर्ट करता है:

लाइटहाउस का स्क्रीनशॉट, जिसमें बहुत ज़्यादा DOM साइज़ वाले ऑडिट से बचा गया है

लाइटहाउस, डीओएम ट्री वाले उन पेजों को फ़्लैग करता है जो:

  • यह चेतावनी, शरीर के एलिमेंट में ~800 से ज़्यादा नोड होने पर दिखती है.
  • बॉडी एलिमेंट में ~1,400 से ज़्यादा नोड होने पर दिखने वाली गड़बड़ियां.

डीओएम के साइज़ को ऑप्टिमाइज़ करने का तरीका

आम तौर पर, ज़रूरत होने पर ही DOM नोड बनाने के तरीके ढूंढें. और नोड की ज़रूरत न होने पर उन्हें मिटा दें.

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

अगर रनटाइम के दौरान डीओएम नोड बनाए जाते हैं, तो सबट्री में बदलाव वाले डीओएम बदलाव के ब्रेकपॉइंट से, नोड बनने के समय का पता लगाने में मदद मिल सकती है.

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

स्टैक के हिसाब से सलाह

Angular

अगर बड़ी सूचियों को रेंडर किया जा रहा है, तो कॉम्पोनेंट डेव किट (सीडीके) के साथ वर्चुअल स्क्रोलिंग का इस्तेमाल करें.

React

  • अगर पेज पर कई एलिमेंट एक से ज़्यादा बार रेंडर किए जा रहे हैं, तो बनाए गए डीओएम नोड की संख्या कम करने के लिए, react-window जैसी "window" लाइब्रेरी का इस्तेमाल करें.
  • shouldComponentUpdate, PureComponent या React.memo का इस्तेमाल करके, ग़ैर-ज़रूरी री-रेंडरिंग को कम करें.
  • अगर रनटाइम की परफ़ॉर्मेंस को बेहतर बनाने के लिए, Effect हुक का इस्तेमाल किया जा रहा है, तो सिर्फ़ तब तक इफ़ेक्ट छोड़ें जब तक कुछ डिपेंडेंसी बदल न जाएं.

संसाधन