ต้นไม้ CSSOM และ DOM จะรวมกันเป็นต้นไม้การแสดงผล ซึ่งจะใช้ในการคำนวณเลย์เอาต์ขององค์ประกอบที่มองเห็นได้แต่ละรายการและทำหน้าที่เป็นอินพุตไปยังกระบวนการลงสีที่แสดงภาพพิกเซลบนหน้าจอ การเพิ่มประสิทธิภาพแต่ละขั้นตอน สำคัญต่อการแสดงผลที่มีประสิทธิภาพสูงสุด
ในส่วนก่อนหน้านี้เกี่ยวกับการสร้างโมเดลออบเจ็กต์ เราได้สร้าง DOM และต้นไม้ CSSOM โดยใช้อินพุต HTML และ CSS แต่ทั้ง 2 อย่างนี้เป็นวัตถุอิสระที่จับภาพเอกสารในหลายๆ แง่มุม ส่วนอีกรายการอธิบายเนื้อหา ส่วนอีกรายการอธิบายกฎของรูปแบบที่ต้องใช้กับเอกสาร เราจะรวมทั้ง 2 อย่างนี้และให้เบราว์เซอร์แสดงผลพิกเซลบนหน้าจอได้อย่างไร
สรุป
- ต้นไม้ DOM และ CSSOM จะรวมเข้าด้วยกันเพื่อสร้างโครงสร้างการแสดงผล
- แผนผังการแสดงผลมีเฉพาะโหนดที่จำเป็นต่อการแสดงผลหน้าเว็บ
- เลย์เอาต์จะคำนวณตำแหน่งและขนาดที่แน่นอนของออบเจ็กต์แต่ละรายการ
- ขั้นตอนสุดท้ายคือลงสี ซึ่งจะไปในโครงสร้างการแสดงผลสุดท้ายและแสดงผลพิกเซลบนหน้าจอ
อย่างแรก เบราว์เซอร์จะรวม DOM และ CSSOM เข้าเป็น "ต้นไม้การแสดงผล" ซึ่งจะบันทึกเนื้อหา DOM ที่มองเห็นได้ทั้งหมดในหน้าเว็บและข้อมูลรูปแบบ CSSOM ทั้งหมดสำหรับแต่ละโหนด
ในการสร้างโครงสร้างการแสดงผล เบราว์เซอร์จะดำเนินการต่อไปนี้คร่าวๆ
ข้ามผ่านโหนดที่ปรากฏแต่ละโหนดโดยเริ่มต้นที่รากของแผนผัง DOM
- บางโหนดจะมองไม่เห็น (เช่น แท็กสคริปต์ เมตาแท็ก และอื่นๆ) และจะถูกละไว้ เนื่องจากไม่แสดงในเอาต์พุตที่แสดงผล
- โหนดบางโหนดถูกซ่อนผ่าน CSS และละเว้นจากโครงสร้างการแสดงผลด้วย ตัวอย่างเช่น โหนด Span ในตัวอย่างข้างต้น ไม่อยู่ในโครงสร้างการแสดงผล เนื่องจากเรามีกฎที่ชัดเจนที่กำหนดคุณสมบัติ "display: none" ในโหนดดังกล่าว
สำหรับโหนดที่ปรากฏแต่ละโหนด ให้ค้นหากฎ CSSOM ที่ตรงกันที่เหมาะสม แล้วใช้กฎเหล่านั้น
ส่งโหนดที่มองเห็นได้ที่มีเนื้อหาและรูปแบบที่คำนวณ
ผลลัพธ์สุดท้ายคือแผนผังการแสดงผลที่มีทั้งข้อมูลเนื้อหาและรูปแบบของเนื้อหาที่มองเห็นได้ทั้งหมดบนหน้าจอ เมื่อมีทรีการแสดงผลเข้าที่แล้ว เราก็สามารถไปยังขั้นตอน "เลย์เอาต์" ได้
ถึงจุดนี้เราได้คำนวณว่าโหนดใดควรมองเห็นได้และรูปแบบที่คำนวณแล้ว แต่เรายังไม่ได้คำนวณตำแหน่งและขนาดที่แน่นอนภายในวิวพอร์ตของอุปกรณ์ นั่นคือระยะ "เลย์เอาต์" หรือที่เรียกว่า "การจัดเรียงใหม่"
ในการหาขนาดและตำแหน่งที่แน่นอนของแต่ละออบเจ็กต์ในหน้า เบราว์เซอร์จะเริ่มต้นที่รากของโครงสร้างการแสดงผลและข้ามผ่าน ลองพิจารณาตัวอย่างง่ายๆ แบบลงมือปฏิบัติ:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
เนื้อหาของหน้าเว็บข้างต้นประกอบด้วย div ที่ซ้อนอยู่ 2 รายการ ได้แก่ div แรก (ระดับบนสุด) จะกำหนดขนาดการแสดงผลของโหนดเป็น 50% ของความกว้างวิวพอร์ต และ div ที่ 2 ซึ่งอยู่ในระดับบนสุด จะตั้งค่าความกว้างเป็น 50% ของระดับบน นั่นคือ 25% ของความกว้างของวิวพอร์ต
เอาต์พุตของกระบวนการเลย์เอาต์คือ "โมเดลกล่อง" ซึ่งจับตำแหน่งและขนาดที่แน่นอนของแต่ละองค์ประกอบภายในวิวพอร์ตได้อย่างแม่นยำ โดยการวัดแบบสัมพัทธ์ทั้งหมดจะถูกแปลงเป็นพิกเซลสัมบูรณ์บนหน้าจอ
สุดท้ายนี้ เมื่อเราทราบว่าโหนดใดที่มองเห็นได้ รวมถึงรูปแบบและเรขาคณิตที่คำนวณแล้ว เราสามารถส่งข้อมูลนี้ไปยังขั้นตอนสุดท้าย ซึ่งจะแปลงแต่ละโหนดในโครงสร้างการแสดงผลเป็นพิกเซลจริงบนหน้าจอ ขั้นตอนนี้มักเรียกว่า "ภาพวาด" หรือ "การแรสเตอร์"
ซึ่งอาจใช้เวลาพอสมควรเนื่องจากเบราว์เซอร์จะมีการทำงานค่อนข้างมาก แต่เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถให้ข้อมูลเชิงลึกเกี่ยวกับขั้นตอนทั้ง 3 ขั้นที่อธิบายข้างต้นได้ มาดูขั้นตอนเลย์เอาต์สำหรับตัวอย่าง "hello world" เดิมของเรากัน
- เหตุการณ์ "เลย์เอาต์" จะบันทึกการสร้างแผนผังการแสดงผล ตำแหน่ง และขนาดการคำนวณในไทม์ไลน์
- เมื่อเลย์เอาต์เสร็จสมบูรณ์แล้ว เบราว์เซอร์จะแก้ปัญหาเหตุการณ์ "Paint Setup" และ "Paint" ซึ่งจะแปลงโครงสร้างการแสดงผลเป็นพิกเซลบนหน้าจอ
เวลาที่ใช้ในการสร้างต้นไม้ในการแสดงผล เลย์เอาต์ และสีจะแตกต่างกันไปตามขนาดเอกสาร รูปแบบที่นำไปใช้ และอุปกรณ์ที่ใช้ ยิ่งเอกสารมีขนาดใหญ่เท่าไร เบราว์เซอร์ก็ยิ่งมีงานมากเท่านั้น ยิ่งรูปแบบซับซ้อนมากเท่าใด ก็ยิ่งใช้เวลาทาสีนานขึ้นด้วย (เช่น สีทึบมี "ราคาถูก" ส่วนเงาตกกระทบจะ "แพง" ในการประมวลผลและแสดงผล)
ในที่สุดหน้าเว็บก็จะปรากฏในวิวพอร์ต
มาดูสรุปขั้นตอนของเบราว์เซอร์กัน
- ประมวลผลมาร์กอัป HTML และสร้างแผนผัง DOM
- ประมวลผลมาร์กอัป CSS และสร้างต้นไม้ CSSOM
- รวม DOM และ CSSOM เข้ากับโครงสร้างการแสดงผล
- เรียกใช้เลย์เอาต์ในทรีการแสดงผลเพื่อคำนวณเรขาคณิตของแต่ละโหนด
- ระบายสีแต่ละโหนดไปยังหน้าจอ
หน้าสาธิตของเราอาจดูเรียบง่าย แต่ต้องมีการทำงานค่อนข้างมาก หากมีการแก้ไข DOM หรือ CSSOM คุณจะต้องทำกระบวนการนี้ซ้ำเพื่อให้ทราบว่าจะต้องแสดงผลพิกเซลใดบนหน้าจออีกครั้ง
การเพิ่มประสิทธิภาพเส้นทางการแสดงผลวิกฤติคือกระบวนการลดระยะเวลาทั้งหมดที่ใช้ในขั้นตอนที่ 1 ถึง 5 ในลำดับข้างต้น วิธีนี้จะช่วยให้แสดงผลเนื้อหาบนหน้าจอได้เร็วที่สุดและยังลดระยะเวลาระหว่างการอัปเดตหน้าจอหลังจากการแสดงผลครั้งแรก กล่าวคือ จะมีอัตราการรีเฟรชสูงขึ้นสำหรับเนื้อหาแบบอินเทอร์แอกทีฟ