مسار التصيير الحرج هو سلسلة الخطوات التي يتخذها المتصفح لتحويل 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
ما يعيق التصيير
لن يقوم المتصفح بالرسم حتى يكون CSSOM جاهزاً (لتجنب ظهور محتوى بدون أنماط). لذلك فإن CSS الكبير أو البطيء يؤخر الرسم الأول — احرص على أن يكون CSS الحرج صغيراً وضمّنه عند الإمكان.