बड़े DOM साइज़, इंटरैक्टिविटी पर कैसे असर डालते हैं और इस बारे में क्या किया जा सकता है

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

Jeremy Wagner

कोई दूसरा विकल्प नहीं है: वेब पेज बनाने पर, उस पेज में डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) होगा. डीओएम, आपके पेज के एचटीएमएल के स्ट्रक्चर को दिखाता है. साथ ही, JavaScript और सीएसएस को पेज के स्ट्रक्चर और कॉन्टेंट का ऐक्सेस देता है.

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

यह समस्या, बहुत बड़े DOM वाले पेजों में तब होती है, जब DOM में बदलाव करने या उसे अपडेट करने वाले इंटरैक्शन, महंगे लेआउट को ट्रिगर करते हैं. इससे पेज के तुरंत जवाब देने की क्षमता पर असर पड़ता है. ज़्यादा जटिल लेआउट से, पेज के इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) पर असर पड़ सकता है. अगर आपको पेज को उपयोगकर्ता के इंटरैक्शन का तुरंत जवाब देना है, तो यह पक्का करना ज़रूरी है कि आपके डीओएम का साइज़ सिर्फ़ ज़रूरत के मुताबिक हो.

किसी पेज का डीओएम बहुत बड़ा कब होता है?

मुख्य शब्द: डीओएम एलिमेंट और डीओएम नोड के बीच का अंतर जानना ज़रूरी है. DOM एलिमेंट का मतलब, DOM ट्री में मौजूद किसी खास एचटीएमएल एलिमेंट से है. DOM नोड का मतलब, DOM एलिमेंट के शब्द से मेल खाता है. हालांकि, इसकी परिभाषा को टिप्पणियों, खाली जगह, और टेक्स्ट को शामिल करने के लिए बड़ा किया गया है. Lighthouse के डीओएम साइज़ के ऑडिट में डीओएम नोड के बारे में बताया गया है. हालांकि, इस गाइड में जहां भी हो सकेगा, नोड के बजाय डीओएम एलिमेंट के बारे में बताया जाएगा.

Lighthouse के मुताबिक, जब किसी पेज के डीओएम में 1,400 से ज़्यादा नोड होते हैं, तो उसका साइज़ बहुत ज़्यादा होता है. जब किसी पेज का डीओएम 800 नोड से ज़्यादा हो जाएगा, तब Lighthouse चेतावनियां दिखाना शुरू कर देगा. उदाहरण के लिए, यह एचटीएमएल देखें:

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

ऊपर दिए गए कोड में चार डीओएम एलिमेंट हैं: <ul> एलिमेंट और उसके तीन <li> चाइल्ड एलिमेंट. आपके वेब पेज में ज़्यादा से ज़्यादा नोड होंगे. इसलिए, यह समझना ज़रूरी है कि डीओएम के साइज़ को कंट्रोल करने के लिए क्या किया जा सकता है. साथ ही, पेज के डीओएम को जितना हो सके उतना छोटा करने के बाद, रेंडरिंग के काम को ऑप्टिमाइज़ करने के लिए अन्य रणनीतियों के बारे में भी जानना ज़रूरी है.

बड़े डीओएम का पेज की परफ़ॉर्मेंस पर क्या असर पड़ता है?

बड़े डीओएम, पेज की परफ़ॉर्मेंस पर इन तरीकों से असर डालते हैं:

1. पेज के शुरुआती रेंडर के दौरान. जब किसी पेज पर सीएसएस लागू की जाती है, तो सीएसएस ऑब्जेक्ट मॉडल (CSSOM) नाम का एक स्ट्रक्चर बनता है, जो DOM जैसा ही होता है. सीएसएस सिलेक्टर ज़्यादा सटीक होने पर, सीएसएसओएम ज़्यादा जटिल हो जाता है. साथ ही, वेब पेज को स्क्रीन पर दिखाने के लिए, ज़रूरी लेआउट, स्टाइल, कंपोजिंग, और पेंट वर्क को चलाने में ज़्यादा समय लगता है. इस अतिरिक्त काम की वजह से, पेज लोड होने के दौरान होने वाले इंटरैक्शन के लिए, इंटरैक्शन में लगने वाला समय बढ़ जाता है.
2. जब इंटरैक्शन, एलिमेंट डालने या मिटाने या डीओएम कॉन्टेंट और स्टाइल में बदलाव करके डीओएम में बदलाव करते हैं, तो उस अपडेट को रेंडर करने के लिए ज़रूरी काम की वजह से, लेआउट, स्टाइल, कंपोजिट, और पेंट करने में काफ़ी समय लग सकता है. पेज के शुरुआती रेंडर की तरह, सीएसएस सिलेक्टर की खास जानकारी में बढ़ोतरी होने पर, रेंडरिंग के काम में बढ़ोतरी हो सकती है. ऐसा तब होता है, जब किसी इंटरैक्शन के नतीजे के तौर पर एचटीएमएल एलिमेंट, DOM में डाले जाते हैं.
3. जब JavaScript, डीओएम से क्वेरी करता है, तो डीओएम एलिमेंट के रेफ़रंस मेमोरी में सेव हो जाते हैं. उदाहरण के लिए, अगर किसी पेज पर सभी <div> एलिमेंट चुनने के लिए document.querySelectorAll को कॉल किया जाता है, तो अगर नतीजे में बड़ी संख्या में डीओएम एलिमेंट दिखते हैं, तो मेमोरी की लागत काफ़ी ज़्यादा हो सकती है.

Chrome DevTools में परफ़ॉर्मेंस प्रोफ़ाइलर में दिखाया गया लंबा टास्क. लंबा टास्क दिखने की वजह यह है कि JavaScript की मदद से, बड़े डीओएम में डीओएम एलिमेंट डाले जा रहे हैं.

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

मैं DOM साइज़ को कैसे मेज़र करूं?

डीओएम साइज़ को कई तरीकों से मेज़र किया जा सकता है. पहला तरीका, Lighthouse का इस्तेमाल करता है. ऑडिट करने पर, मौजूदा पेज के DOM के आंकड़े, "गड़बड़ी की जानकारी" हेडिंग में "बड़े साइज़ के DOM से बचें" ऑडिट में दिखेंगे. इस सेक्शन में, डीओएम एलिमेंट की कुल संख्या, सबसे ज़्यादा चाइल्ड एलिमेंट वाला डीओएम एलिमेंट, और सबसे डीप डीओएम एलिमेंट देखा जा सकता है.

किसी भी मुख्य ब्राउज़र के डेवलपर टूल में JavaScript कंसोल का इस्तेमाल करके, यह आसानी से किया जा सकता है. पेज लोड होने के बाद, कंसोल में इस कोड का इस्तेमाल करके, DOM में मौजूद एचटीएमएल एलिमेंट की कुल संख्या देखी जा सकती है:

document.querySelectorAll('*').length;

ध्यान दें: ध्यान दें कि ऊपर दिए गए कोड स्निपेट में, डीओएम में मौजूद सिर्फ़ एचटीएमएल एलिमेंट की संख्या शामिल है. इसमें डीओएम के सभी नोड शामिल नहीं होते.

अगर आपको रीयलटाइम में DOM साइज़ का अपडेट देखना है, तो परफ़ॉर्मेंस मॉनिटर टूल का इस्तेमाल भी किया जा सकता है. इस टूल का इस्तेमाल करके, मौजूदा DOM साइज़ के साथ-साथ लेआउट और स्टाइलिंग ऑपरेशन (और परफ़ॉर्मेंस के अन्य पहलुओं) को जोड़ा जा सकता है.

Chrome DevTools में परफ़ॉर्मेंस मॉनिटर. इस व्यू में, पेज के मौजूदा DOM नोड की संख्या को चार्ट में दिखाया जाता है. साथ ही, हर सेकंड में किए गए लेआउट ऑपरेशन और स्टाइल की फिर से गिनती की जानकारी भी दी जाती है.

अगर डीओएम का साइज़, Lighthouse के डीओएम साइज़ की चेतावनी के थ्रेशोल्ड के करीब पहुंच रहा है या पूरी तरह से फ़ेल हो रहा है, तो अगला चरण डीओएम के साइज़ को कम करने का तरीका ढूंढना है. इससे आपके पेज को उपयोगकर्ता के इंटरैक्शन का जवाब देने में मदद मिलेगी, ताकि आपकी वेबसाइट का आईएनपी बेहतर हो सके.

मैं किसी इंटरैक्शन से प्रभावित DOM एलिमेंट की संख्या को कैसे मेज़र करूं?

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

स्टाइल की फिर से गिनती करने के काम के नतीजे के तौर पर, डीओएम में उन एलिमेंट की संख्या को देखना जिन पर असर पड़ा है. ध्यान दें कि इंटरैक्शन ट्रैक में इंटरैक्शन के शेड किए गए हिस्से से, इंटरैक्शन की अवधि के उस हिस्से के बारे में पता चलता है जो 200 मिलीसेकंड से ज़्यादा था. यह आईएनपी के लिए तय किया गया "अच्छा" थ्रेशोल्ड है.

ऊपर दिए गए स्क्रीनशॉट में देखें कि चुने जाने पर, स्टाइल को फिर से कैलकुलेट करने पर, उन एलिमेंट की संख्या दिखती है जिन पर असर पड़ा है. ऊपर दिए गए स्क्रीनशॉट में, कई DOM एलिमेंट वाले पेज पर रेंडरिंग के काम पर DOM साइज़ के असर का एक चरम मामला दिखाया गया है. हालांकि, गड़बड़ी की जानकारी देने वाली यह जानकारी किसी भी मामले में यह तय करने के लिए काम की है कि किसी इंटरैक्शन के जवाब में अगले फ़्रेम को पेंट होने में कितना समय लगता है.

मैं DOM का साइज़ कैसे कम करूं?

अपनी वेबसाइट के एचटीएमएल को अनावश्य मार्कअप के लिए ऑडिट करने के अलावा, डीओएम के साइज़ को कम करने का मुख्य तरीका डीओएम की डेप्थ को कम करना है. अगर आपको अपने ब्राउज़र के डेवलपर टूल के एलिमेंट टैब में ऐसा मार्कअप दिखता है, तो हो सकता है कि आपका DOM ग़ैर-ज़रूरी रूप से बड़ा हो:

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

जब आपको इस तरह के पैटर्न दिखें, तो अपने DOM स्ट्रक्चर को फ़्लैट करके उन्हें आसान बनाया जा सकता है. ऐसा करने से, डीओएम एलिमेंट की संख्या कम हो जाएगी. साथ ही, आपको पेज स्टाइल को आसान बनाने का मौका मिलेगा.

डीओएम की गहराई, इस्तेमाल किए जा रहे फ़्रेमवर्क की वजह से भी हो सकती है. खास तौर पर, कॉम्पोनेंट पर आधारित फ़्रेमवर्क, जैसे कि JSX पर आधारित फ़्रेमवर्क के लिए, आपको पैरंट कंटेनर में कई कॉम्पोनेंट नेस्ट करने होंगे.

हालांकि, कई फ़्रेमवर्क में फ़्रैगमेंट का इस्तेमाल करके, नेस्ट किए गए कॉम्पोनेंट से बचने की सुविधा मिलती है. कॉम्पोनेंट पर आधारित फ़्रेमवर्क, फ़्रैगमेंट को एक सुविधा के तौर पर उपलब्ध कराते हैं. इनमें ये शामिल हैं, लेकिन इन तक ही सीमित नहीं हैं:

• प्रतिक्रिया देना
• Preact
• Vue
• Svelte

अपने पसंदीदा फ़्रेमवर्क में फ़्रैगमेंट का इस्तेमाल करके, डीओएम की गहराई को कम किया जा सकता है. अगर आपको स्टाइल पर, DOM स्ट्रक्चर को फ़्लैट करने के असर की चिंता है, तो फ़्लेक्सबॉक्स या ग्रिड जैसे ज़्यादा आधुनिक (और तेज़) लेआउट मोड का इस्तेमाल करें.

ध्यान में रखने वाली अन्य रणनीतियां

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

बेहतर तरीके से काम करने के बारे में सोचें

ऐसा हो सकता है कि आपके पेज के बड़े हिस्से, पहली बार रेंडर होने पर उपयोगकर्ता को न दिखें. इस स्थिति में, एचटीएमएल को लेज़ी लोड किया जा सकता है. इसके लिए, स्टार्टअप के समय DOM के उन हिस्सों को हटाएं जिनकी ज़रूरत नहीं है. हालांकि, जब उपयोगकर्ता पेज के उन हिस्सों से इंटरैक्ट करता है जिनके लिए पेज के शुरुआती हिस्सों को छिपाना ज़रूरी है, तब उन्हें जोड़ें.

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

अगर आपके पेज के कई हिस्से लोड होने पर शुरू में छिपे हुए हैं, तो इससे अन्य इंटरैक्शन भी तेज़ हो सकते हैं. ये इंटरैक्शन, फिर से रेंडर करने की प्रोसेस को ट्रिगर करते हैं. हालांकि, पेज के लाइफ़साइकल के दौरान डीओएम में अन्य इंटरैक्शन जोड़ने पर, रेंडरिंग का काम बढ़ जाएगा.

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

सीएसएस सिलेक्टर को जटिल न बनाएं

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

ज़्यादा जानने के लिए पढ़ें: स्टाइल कैलकुलेशन के दायरे और जटिलता को कम करना.

content-visibility प्रॉपर्टी का इस्तेमाल करना

सीएसएस में content-visibility प्रॉपर्टी होती है. यह ऑफ़-स्क्रीन डीओएम एलिमेंट को लैज़ी तरीके से रेंडर करने का असरदार तरीका है. जब एलिमेंट व्यूपोर्ट के करीब आते हैं, तो उन्हें मांग के हिसाब से रेंडर किया जाता है. content-visibility के फ़ायदे सिर्फ़ पेज के शुरुआती रेंडर पर रेंडरिंग के काम को काटने तक ही सीमित नहीं हैं. बल्कि, उपयोगकर्ता के इंटरैक्शन की वजह से पेज के डीओएम में बदलाव होने पर, ऑफ़स्क्रीन एलिमेंट के लिए रेंडरिंग का काम भी छोड़ दिया जाता है.

ज़्यादा जानने के लिए पढ़ें: content-visibility: एक नई सीएसएस प्रॉपर्टी, जो रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाती है.

नतीजा

अपनी वेबसाइट के आईएनपी को ऑप्टिमाइज़ करने का एक अच्छा तरीका यह है कि आप अपने डीओएम के साइज़ को सिर्फ़ ज़रूरी चीज़ों तक सीमित रखें. ऐसा करने से, डीओएम अपडेट होने पर ब्राउज़र को लेआउट और रेंडरिंग का काम करने में लगने वाला समय कम किया जा सकता है. भले ही, आपके पास DOM के साइज़ को कम करने का विकल्प न हो, लेकिन कुछ तकनीकों का इस्तेमाल करके, रेंडरिंग के काम को DOM के सबट्री में अलग किया जा सकता है. जैसे, सीएसएस कंटेनमेंट और content-visibility सीएसएस प्रॉपर्टी.

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