पब्लिश किया गया: 8 अक्टूबर, 2025
डीओएम के बड़े साइज़ की वजह से, स्टाइल कैलकुलेशन और लेआउट की प्रोसेस में ज़्यादा समय लग सकता है. इसकी वजह से, पेज के रिस्पॉन्स देने की प्रोसेस पर असर पड़ता है. बड़े डीओएम से मेमोरी का इस्तेमाल भी बढ़ जाता है.
डीप ड़ॉम ट्री से परफ़ॉर्मेंस पर कोई असर नहीं पड़ता. हालांकि, यह ऐसे डिज़ाइन पैटर्न का लक्षण है जिनमें ज़रूरत से ज़्यादा एलिमेंट नेस्टिंग का इस्तेमाल किया जाता है.
इस इनसाइट में पूरे DOM को ध्यान में रखा जाता है. इसमें शैडो रूट भी शामिल हैं. यह उन डीओएम नोड को अनदेखा करता है जो एलिमेंट नहीं हैं. यह <iframe> कॉन्टेंट को भी अनदेखा करता है.
क्या खोजें:
- कुल एलिमेंट: आपके पेज के DOM में मौजूद एलिमेंट की कुल संख्या.
- डीओएम ट्री की लेंथ: डीओएम ट्री की ज़्यादा से ज़्यादा लेंथ.
- ज़्यादा से ज़्यादा चाइल्ड एलिमेंट: ऐसा एलिमेंट जिसमें सबसे ज़्यादा चाइल्ड एलिमेंट हों.
इस अहम जानकारी को कैसे पास करें
यह इनसाइट सिर्फ़ तब नहीं मिलती है, जब लेआउट या स्टाइल का आकलन करने में 40 मि॰से॰ से ज़्यादा समय लगता है.
- बड़े लेआउट अपडेट में, 100 से ज़्यादा लेआउट ऑब्जेक्ट (जो कि एलिमेंट होते हैं) शामिल होते हैं.
- बड़े स्टाइल रीकैलकुलेशन का असर 300 से ज़्यादा एलिमेंट पर पड़ता है.
अगर ऐसा नहीं होता है, तो परफ़ॉर्मेंस पैनल में मौजूद इस अहम जानकारी में, फ़्लेम चार्ट में इन इवेंट को हाइलाइट किया जाता है.
इन इवेंट की लागत कम करने के लिए:
- सीएसएस सिलेक्टर की लागत का आकलन करने और स्टाइल की जटिलता को कम करने का तरीका जानें.
- ज़रूरत से ज़्यादा नेस्टिंग कम करके, DOM की डेप्थ कम करें.
- शैडो डीओएम का इस्तेमाल करने के लिए, वेब कॉम्पोनेंट का इस्तेमाल करें. इससे डीओएम का साइज़ कम नहीं होगा, लेकिन स्टाइल रीकैलकुलेशन की लागत कम हो जाएगी.
स्टैक के हिसाब से सलाह
इस अहम जानकारी में, स्टैक के हिसाब से दिशा-निर्देश भी दिए जाते हैं. ये दिशा-निर्देश, इन टेक्नोलॉजी का इस्तेमाल करने वाले पेजों के लिए होते हैं:
Angular
अगर बड़ी सूचियां रेंडर की जा रही हैं, तो कॉम्पोनेंट डेवलपमेंट किट (सीडीके) के साथ वर्चुअल स्क्रोलिंग का इस्तेमाल करें.
React
- अगर पेज पर कई एलिमेंट एक से ज़्यादा बार रेंडर किए जा रहे हैं, तो बनाए गए डीओएम नोड की संख्या कम करने के लिए,
react-windowजैसी "छोटी विंडो वाली" लाइब्रेरी का इस्तेमाल करें. - ज़रूरी न होने पर बार-बार रेंडर करने से बचने के लिए,
shouldComponentUpdate,PureComponentयाReact.memoका इस्तेमाल करें. - इफ़ेक्ट छोड़ें
का इस्तेमाल तब तक करें, जब तक कुछ और करने की ज़रूरत न हो. साथ ही, जब आप रनटाइम परफ़ॉर्मेंस को बेहतर बनाने के लिए
Effectहुक का इस्तेमाल कर रहे हों.
अन्य रेफ़रंस
- खास जानकारी का सोर्स कोड
- डीओएम के बड़े साइज़ से इंटरैक्टिविटी पर क्या असर पड़ता है और इसे ठीक करने के लिए क्या किया जा सकता है
- ब्राउज़र के रीफ़्लो को कम करना
- Chrome DevTools में सिलेक्टर के आंकड़े
- Blink में स्टाइल की पुष्टि न हो पाना
- फ़ील्ड में स्टाइल को फिर से कैलकुलेट करने में लगने वाले समय का आकलन करना