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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

मैं डीओएम का साइज़ कैसे मेज़र करूं?

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

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

document.querySelectorAll('*').length;

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

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

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

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

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

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

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

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

मैं डीओएम का साइज़ कैसे कम करूं?

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

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

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

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

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

• प्रतिक्रिया दें
• प्रीएक्ट
• Vue
• स्वेल्ट

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

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

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

जोड़ने के तरीके के बारे में सोचें

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

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

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

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

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

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

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

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

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

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

नतीजा

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

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