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

बड़े DOM साइज़ों का इंटरैक्टिविटी पर असर उतना ज़्यादा होता है जितना आपने सोचा था. इस गाइड में बताया गया है कि ऐसा क्यों हुआ और आप क्या कर सकते हैं.

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

document.querySelectorAll('*').length;

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

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

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

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

इंटरैक्शन से जिन डीओएम एलिमेंट पर असर पड़ा है उनकी संख्या कैसे मेज़र की जा सकती है?

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

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

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

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

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

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

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

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

हालांकि, कई फ़्रेमवर्क आपको फ़्रैगमेंट कहे जाने वाले कॉम्पोनेंट का इस्तेमाल करके, कॉम्पोनेंट को नेस्ट करने से बचने की अनुमति देते हैं. सुविधा के रूप में फ़्रैगमेंट देने वाले कॉम्पोनेंट पर आधारित फ़्रेमवर्क में, नीचे दी गई चीज़ें शामिल हैं (हालांकि, इनके अलावा और भी चीज़ें शामिल हो सकती हैं):

• प्रतिक्रिया करें
• प्रीैक्ट
• व्यू
• स्वेल्टे

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

अन्य रणनीतियां

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

एक और तरीका अपनाएं

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

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

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

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

सीएसएस सिलेक्टर की जटिलता को सीमित करें

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

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

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

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

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

नतीजा

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

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

Unsplash की हीरो इमेज, जिसे लुई रीड ने बनाया है.