ब्राउज़र HTML को कैसे पार्स करता है और पृष्ठ बनाता है (critical rendering path)?

Question

Accepted Answer

**critical rendering path** ब्राउज़र द्वारा HTML, CSS और JS को पिक्सल में बदलने के लिए लिए गए चरणों का क्रम है। इसे समझने से पता चलता है कि क्या रेंडरिंग को रोकता है और पृष्ठों को तेजी से कैसे पेंट किया जाए। ## चरण ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## रेंडरिंग को क्या रोकता है **CSS रेंडरिंग को रोकता है।** ब्राउज़र CSSOM तैयार होने तक पेंट नहीं करेगा (अस्टाइल्ड कंटेंट की फ्लैश से बचने के लिए)। तो बड़ा/धीमा CSS पहली पेंट में देरी करता है — महत्वपूर्ण CSS को छोटा रखें और जहां संभव हो इसे इनलाइन करें। **सिंक्रोनस स्क्रिप्ट पार्सर को रोकते हैं।** एक साधारण ` ``` और भी बुरा, एक सिंक्रोनस स्क्रिप्ट जिसे CSSOM की आवश्यकता है (जैसे गणना की गई शैलियों को पढ़ना) CSS के लिए भी प्रतीक्षा करता है — तो एक CSS फ़ाइल अप्रत्यक्ष रूप से एक स्क्रिप्ट को रोक सकती है, जो पार्सर को रोकती है। ## इसे कैसे अनुकूलित करें - CSS को `` में रखें (इसे जल्दी लोड करें); महत्वपूर्ण CSS को इनलाइन करें। - स्क्रिप्ट में `defer` (या `type="module"`) जोड़ें, या उन्हें `` से पहले रखें। - CSS/JS को कम करें और संपीड़ित करें; अप्रयुक्त नियमों को हटाएं। - महत्वपूर्ण फॉन्ट/संपत्ति के लिए `preload` का उपयोग करें, मुख्य मूल के लिए `preconnect`। - लेआउट thrashing (JS में लेआउट को बार-बार पढ़ना/लिखना) से बचें — यह अतिरिक्त reflows को बाध्य करता है। ## यह महत्वपूर्ण क्यों है Critical rendering path First Contentful Paint और Largest Contentful Paint जैसे मेट्रिक्स निर्धारित करता है। यह जानना कि CSS रेंडरिंग को रोकता है और सिंक्रोनस JS पार्सिंग को रोकता है आपको बिल्कुल बताता है कि `defer`/`async`, इनलाइन किया गया महत्वपूर्ण CSS और संसाधन संकेत पृष्ठ को तेजी से क्यों करते हैं — वे इस पथ को छोटा करते हैं या अनब्लॉक करते हैं।