เบราว์เซอร์แยกวิเคราะห์ HTML และสร้างหน้าเว็บอย่างไร (ระบบแสดงผลที่สำคัญ)?

Question

Accepted Answer

**ระบบแสดงผลที่สำคัญ** คือลำดับขั้นตอนที่เบราว์เซอร์ใช้เพื่อเปลี่ยน 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` สำหรับต้นทางที่สำคัญ - หลีกเลี่ยงการทำลายการจัดวาง (อ่าน/เขียนการจัดวางซ้ำใน JS) — บังคับให้เกิด reflow เพิ่มเติม ## ทำไมจึงสำคัญ ระบบแสดงผลที่สำคัญ กำหนดเมตริกเช่น First Contentful Paint และ Largest Contentful Paint การรู้ว่า CSS ขัดขวางการแสดงผล และ JS แบบซิงโครนัส ขัดขวางการวิเคราะห์ บอกคุณอย่างแม่นยำว่าทำไม `defer`/`async`, CSS ที่สำคัญฝังไว้ และคำแนะนำทรัพยากร จึงทำให้หน้าเว็บเร็วขึ้น — พวกเขาย่อให้สั้นหรือปลดล็อครูทนี้