ระบบแสดงผลที่สำคัญ คือลำดับขั้นตอนที่เบราว์เซอร์ใช้เพื่อเปลี่ยน HTML, CSS และ JS เป็นพิกเซล การทำความเข้าใจเรื่องนี้จะอธิบายว่าอะไรที่ขัดขวางการแสดงผล และจะทำให้หน้าเว็บแสดงผลได้เร็วขึ้นอย่างไร
ขั้นตอน
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 ที่สำคัญมีขนาดเล็ก และฝังไว้เมื่อเป็นไปได้
