หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด
ดูว่าเบราว์เซอร์จัดการไบต์ของ HTML และ CSS อย่างไร ตั้งแต่สร้าง DOM และ CSSOM คำนวณการจัดวาง ไปจนถึงวาดพิกเซล
หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
จากไบต์สู่พิกเซล
เมื่อเบราว์เซอร์ได้รับไบต์ HTML จากเซิร์ฟเวอร์ กระบวนการหลายขั้นตอนจะแปลงไบต์เหล่านั้นเป็นพิกเซลที่คุณเห็นบนหน้าจอ การรู้จักกระบวนการนี้จะช่วยให้คุณปรับปรุงประสิทธิภาพและเข้าใจสาเหตุของความผิดปกติทางภาพได้
ขั้นตอนที่ 1 — แยกวิเคราะห์ HTML: การสร้าง DOM
ตัวแยกวิเคราะห์ HTML ของเบราว์เซอร์จะอ่านกระแสไบต์และสร้างโมเดลวัตถุเอกสาร (DOM) ซึ่งเป็นต้นไม้ของโหนดที่แสดงองค์ประกอบ HTML โหนดข้อความ และความคิดเห็นทุกส่วนในเอกสาร
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'ขั้นตอนที่ 2 — แยกวิเคราะห์ CSS: การสร้าง CSSOM
ในเวลาเดียวกัน ไบต์ CSS จะถูกแยกวิเคราะห์เป็นโมเดลวัตถุ CSS (CSSOM) ซึ่งเป็นต้นไม้ของกฎรูปแบบ CSS เป็นสิ่งที่บล็อกการแสดงผล: เบราว์เซอร์จะไม่วาดพิกเซลจนกว่าจะคำนวณรูปแบบสำหรับเนื้อหาที่มองเห็นได้เสร็จ
ขั้นตอนที่ 3 — ต้นไม้การแสดงผล
เบราว์เซอร์จะรวม DOM และ CSSOM เข้าด้วยกันเป็นต้นไม้การแสดงผล โดยจะรวมเฉพาะโหนดที่มองเห็นได้เท่านั้น องค์ประกอบที่มี display:none จะถูกตัดออก แต่ละโหนดในต้นไม้การแสดงผลจะเก็บรูปแบบที่คำนวณแล้วซึ่งจะใช้ในการวาด
ขั้นตอนที่ 4 — การจัดวาง (การจัดวางใหม่)
การจัดวางจะคำนวณตำแหน่งและขนาดที่แน่นอนของทุกโหนดในต้นไม้การแสดงผล โดยใช้โมเดลกล่องและความกว้างของพื้นที่แสดงผล ขั้นตอนนี้เรียกอีกอย่างว่าการจัดวางใหม่ การจัดวางใช้ทรัพยากรมาก จึงควรหลีกเลี่ยงการทำให้เกิดซ้ำหลายครั้งใน JavaScript
ขั้นตอนที่ 5 — การวาด
การวาดจะแปลงการจัดวางให้เป็นพิกเซลจริงบนหน้าจอ เบราว์เซอร์จะวาดพื้นหลัง เส้นขอบ ข้อความ และรูปภาพทีละชั้น องค์ประกอบบางอย่างจะสร้างชั้นการประกอบภาพของตัวเองเพื่อการแสดงผลที่เร่งด้วย GPU
ขั้นตอนที่ 6 — การประกอบภาพ
ตัวประกอบภาพของเบราว์เซอร์จะรวมชั้นที่วาดแล้วเข้าด้วยกันเป็นเฟรมสุดท้าย แล้วส่งเฟรมนั้นไปยังหน้าจอ การใช้ transform และ opacity สำหรับภาพเคลื่อนไหวทำให้ตัวประกอบภาพทำงานบน GPU ได้ โดยข้ามขั้นตอนการจัดวางและการวาดทั้งหมด
อะไรบล็อกการแสดงผล
CSS ใน <head> จะบล็อกการแสดงผล ส่วน JavaScript โดยค่าเริ่มต้นจะบล็อกทั้งตัวแยกวิเคราะห์และการแสดงผล ให้ใช้ defer กับแท็กสคริปต์เพื่อแยกวิเคราะห์ JS หลังจาก HTML โดยไม่บล็อกการแสดงผล
<script src="app.js" defer></script>เส้นทางการแสดงผลที่สำคัญ
เส้นทางการแสดงผลที่สำคัญคือลำดับตั้งแต่การรับไบต์ HTML ไปจนถึงการแสดงพิกเซลแรก การปรับปรุงเส้นทางนี้หมายถึงการลดจำนวนและขนาดของทรัพยากรที่บล็อกการแสดงผลให้น้อยที่สุด รวมถึงเลื่อนการเรียกใช้ JS และ CSS ที่ไม่สำคัญออกไป
การจัดวางใหม่กับการวาดใหม่
การเปลี่ยนคุณสมบัติด้านการจัดวาง (ความกว้าง ระยะขอบ ตำแหน่ง) จะทำให้เกิดการจัดวางใหม่และการวาดใหม่ การเปลี่ยนคุณสมบัติที่เกี่ยวกับภาพเท่านั้น (สี พื้นหลัง) จะทำให้เกิดเฉพาะการวาดใหม่ ส่วนการเปลี่ยน transform หรือ opacity จะทำให้เกิดเฉพาะการประกอบภาพ ควรเลือกการดำเนินการที่ใช้ทรัพยากรน้อยที่สุด
DevTools: ดูลำดับเวลาการวาด
ใน Chrome DevTools ให้เปิดแผงประสิทธิภาพ บันทึกการโหลดหน้าเว็บ แล้วตรวจสอบแผนภาพลำดับเวลา คุณจะเห็นเหตุการณ์การวาดสีเขียว และสามารถระบุได้ว่าองค์ประกอบใดทำให้เกิดการจัดวางที่ใช้ทรัพยากรมาก
ตรวจสอบความเข้าใจ
ขั้นตอนใดคำนวณขนาดและตำแหน่งที่แน่นอนขององค์ประกอบแต่ละรายการบนหน้าเว็บ
สรุป: กระบวนการแสดงผล
HTML → DOM → CSSOM → ต้นไม้การแสดงผล → การจัดวาง → การวาด → การประกอบภาพ แต่ละขั้นตอนส่งข้อมูลต่อให้ขั้นตอนถัดไป การปรับปรุงเส้นทางการแสดงผลที่สำคัญหมายถึงการทำให้กระบวนการนี้สั้นลง เพื่อให้เนื้อหาที่มองเห็นได้ส่วนแรกปรากฏเร็วที่สุด
คำถามที่พบบ่อย
บทเรียน “หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด”
ดูว่าเบราว์เซอร์จัดการไบต์ของ HTML และ CSS อย่างไร ตั้งแต่สร้าง DOM และ CSSOM คำนวณการจัดวาง ไปจนถึงวาดพิกเซล คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ
- HTML CSS และ JavaScript: หน้าที่ของแต่ละชั้น
- หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด
- เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools