براؤزر HTML کو کیسے parse کرتا ہے اور صفحہ بناتا ہے (critical rendering path)?

critical rendering path یہ مرحلوں کی ترتیب ہے جو براؤزر HTML، CSS، اور JS کو pixels میں تبدیل کرنے کے لیے لیتا ہے۔ اس کو سمجھنا بتاتا ہے کہ کیا rendering کو روکتا ہے اور صفحات کو تیز رفتاری سے paint کرنے کے لیے کیا کریں۔

مرحلے

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

کیا rendering کو روکتا ہے

براؤزر اس وقت تک paint نہیں کرے گا جب تک CSSOM تیار نہ ہو (unstyled content کی flash سے بچنے کے لیے)۔ اس لیے بڑی/سست CSS پہلی paint میں تاخیر کرتی ہے — critical CSS کو چھوٹا رکھیں اور جہاں ممکن ہو اسے inline کریں۔