โครงสร้างการแสดงผล เลย์เอาต์ และสี

Ilya Grigorik

เผยแพร่เมื่อ: 31 มีนาคม 2014

CSSOM และต้นไม้ DOM จะรวมเข้าด้วยกันเป็นแผนผังการแสดงผล ซึ่งจะถูกนำมาใช้ เพื่อคำนวณเลย์เอาต์ขององค์ประกอบที่มองเห็นได้แต่ละรายการ และทำหน้าที่เป็นอินพุต โหมดการแสดงผลพิกเซลบนหน้าจอ การเพิ่มประสิทธิภาพแต่ละขั้นตอนเหล่านี้เป็นขั้นตอนสําคัญในการช่วยให้การแสดงผลมีประสิทธิภาพสูงสุด

ในส่วนการสร้างโมเดลออบเจ็กต์ก่อนหน้านี้ เราได้สร้าง DOM และต้นไม้ CSSOM ตามอินพุต HTML และ CSS อย่างไรก็ตาม ทั้ง 2 อย่าง วัตถุอิสระที่จับภาพแง่มุมต่างๆ ของเอกสาร: 1 ส่วนอีกแบบจะอธิบายกฎการจัดรูปแบบที่ ใช้กับเอกสารแล้ว เราจะรวมทั้ง 2 อย่างนี้และให้เบราว์เซอร์แสดงผลได้อย่างไร บนหน้าจอหรือไม่

สรุป

  • ต้นไม้ DOM และ CSSOM จะรวมกันเป็นต้นไม้แสดงผล
  • ต้นไม้แสดงผลมีเฉพาะโหนดที่จําเป็นสําหรับแสดงผลหน้าเว็บ
  • เลย์เอาต์จะคำนวณตำแหน่งและขนาดที่แน่นอนของออบเจ็กต์แต่ละรายการ
  • ขั้นตอนสุดท้ายคือ Paint ซึ่งจะรับต้นไม้เรนเดอร์สุดท้ายและแสดงผลพิกเซลบนหน้าจอ

ก่อนอื่น เบราว์เซอร์จะรวม DOM และ CSSOM เข้าเป็น "ต้นไม้การแสดงผล" ซึ่งจะบันทึกเนื้อหา DOM ที่มองเห็นได้ทั้งหมดในหน้าเว็บและข้อมูลสไตล์ CSSOM ทั้งหมดสำหรับแต่ละโหนด

DOM และ CSSOM จะรวมกันเพื่อสร้างต้นไม้การแสดงผล

ในการสร้างโครงสร้างการแสดงผล เบราว์เซอร์จะทำสิ่งต่อไปนี้คร่าวๆ

  1. เริ่มจากรูทของต้นไม้ DOM แล้วไปยังแต่ละโหนดที่มองเห็นได้

    • โหนดบางรายการจะมองไม่เห็น (เช่น แท็กสคริปต์ แท็กเมตา และอื่นๆ) และระบบจะละเว้นเนื่องจากไม่แสดงในเอาต์พุตที่ผ่านการจัดการแสดงผล
    • บางโหนดจะถูกซ่อนโดยใช้ CSS และจะถูกละเว้นจากแผนผังการแสดงผล ตัวอย่างเช่น โหนดสแปนในตัวอย่างข้างต้นหายไปจากแผนผังการแสดงผลเนื่องจากเรามีกฎที่ชัดเจนที่ตั้งค่า "display: none" พร็อพเพอร์ตี้นั้นอยู่

  2. สําหรับโหนดที่มองเห็นได้แต่ละโหนด ให้ค้นหากฎ CSSOM ที่ตรงกันที่เหมาะสมและใช้กฎดังกล่าว

  3. ส่งออกโหนดที่มองเห็นได้พร้อมเนื้อหาและรูปแบบที่คอมไพล์

ผลลัพธ์สุดท้ายคือโครงสร้างการแสดงผลที่มีทั้งข้อมูลเนื้อหาและรูปแบบของเนื้อหาที่มองเห็นได้ทั้งหมดบนหน้าจอ เมื่อสร้างต้นไม้เรนเดอร์แล้ว เราจะไปยังระยะ "เลย์เอาต์" ได้

จนถึงตอนนี้ เราได้คํานวณว่าโหนดใดควรแสดงและสไตล์ที่คำนวณแล้วของโหนดเหล่านั้น แต่ยังไม่ได้คํานวณตําแหน่งและขนาดที่แน่นอนภายในวิวพอร์ตของอุปกรณ์ ซึ่งเป็นระยะ "เลย์เอาต์" หรือที่เรียกว่า "การจัดเรียงใหม่"

เบราว์เซอร์จะเริ่มต้นที่รูทของต้นไม้แสดงผลและเดินผ่านเพื่อหาขนาดและตําแหน่งที่แน่นอนของวัตถุแต่ละรายการในหน้า ลองดูตัวอย่างนี้

<!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>

ลองใช้

<body> ของตัวอย่างก่อนหน้ามี <div> ที่ซ้อนกันอยู่ 2 รายการ รายการแรก (หลัก) <div> ตั้งค่าขนาดการแสดงผลของโหนดเป็น 50% ของความกว้างของวิวพอร์ต และ <div> รายการที่ 2 ซึ่งมีระดับบนสุด ตั้งค่า width เป็น 50% ของโหนดหลัก นั่นคือ 25% ของความกว้างของวิวพอร์ต

กำลังคำนวณข้อมูลเลย์เอาต์

เอาต์พุตของกระบวนการจัดวางคือ "โมเดลกล่อง" ซึ่งจะจับตำแหน่งและขนาดที่แน่นอนขององค์ประกอบแต่ละรายการภายในวิวพอร์ต โดยระบบจะแปลงการวัดสัมพัทธ์ทั้งหมดเป็นพิกเซลสัมบูรณ์บนหน้าจอ

สุดท้าย เมื่อเราทราบแล้วว่าโหนดใดมองเห็นได้ ตลอดจนรูปแบบที่คำนวณและเรขาคณิตของจุดนั้นๆ เราสามารถส่งต่อข้อมูลนี้ไปยังขั้นตอนสุดท้าย ซึ่งจะแปลงแต่ละโหนดในต้นไม้แสดงผลให้เป็นพิกเซลจริงบนหน้าจอ ขั้นตอนนี้มักเรียกว่า "การวาด" หรือ "การจัดแรสเตอร์"

ซึ่งอาจใช้เวลาสักครู่ เนื่องจากเบราว์เซอร์ต้องทำงานค่อนข้างมาก อย่างไรก็ตาม Chrome DevTools สามารถให้ข้อมูลเชิงลึกบางอย่างเกี่ยวกับทั้ง 3 ระยะที่อธิบายไว้ก่อนหน้านี้ ตรวจสอบขั้นของเลย์เอาต์สำหรับ "สวัสดีโลก" เวอร์ชันต้นฉบับของเรา ตัวอย่าง:

การวัดเลย์เอาต์ในเครื่องมือสำหรับนักพัฒนาเว็บ

  • "เลย์เอาต์" เหตุการณ์จะบันทึกการสร้างแผนผังแสดงผล ตำแหน่ง และขนาดในไทม์ไลน์
  • เมื่อเลย์เอาต์เสร็จสมบูรณ์ เบราว์เซอร์จะมีปัญหาในการ "ตั้งค่าสี" และ "สี" เหตุการณ์ ซึ่งแปลงแผนผังการแสดงผลให้เป็นพิกเซลบนหน้าจอ

เวลาที่ใช้ในการสร้างแผนผังต้นไม้ เลย์เอาต์ และสีที่ใช้เพื่อแสดงผลจะแตกต่างกันไปตามขนาดของเอกสาร รูปแบบที่ใช้ และอุปกรณ์ที่ใช้ ยิ่งเอกสารมีขนาดใหญ่เท่าไร เบราว์เซอร์ก็จะทำงานมากขึ้นเท่านั้น ยิ่งรูปแบบมีความซับซ้อนเท่าใด ก็ยิ่งใช้เวลาวาดภาพนานขึ้นเท่านั้น (เช่น สีทึบมีการ "ราคาถูก" ในการทาสี ในขณะที่เงาตกกระทบมี "ราคาแพง" ในการคำนวณและแสดงผล)

หน้าเว็บจะปรากฏในวิวพอร์ตในที่สุด

หน้า Hello World ที่แสดงผล

ข้อมูลสรุปเกี่ยวกับขั้นตอนของเบราว์เซอร์ต่างๆ มีดังนี้

  1. ประมวลผลมาร์กอัป HTML และสร้างแผนผัง DOM
  2. ประมวลผลมาร์กอัป CSS และสร้างต้นไม้ CSSOM
  3. รวม DOM และ CSSOM เป็นแผนผังแสดงผล
  4. เรียกใช้เลย์เอาต์ในต้นไม้เรนเดอร์เพื่อคํานวณเรขาคณิตของโหนดแต่ละโหนด
  5. วาดโหนดแต่ละโหนดบนหน้าจอ

หน้าสาธิตอาจดูเรียบง่าย แต่ต้องมีการดำเนินการเล็กน้อยในส่วนของเบราว์เซอร์ หากมีการแก้ไข DOM หรือ CSSOM คุณจะต้องทําขั้นตอนนี้ซ้ำเพื่อหาพิกเซลที่ต้องแสดงผลบนหน้าจออีกครั้ง

การเพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สำคัญคือกระบวนการลดเวลาทั้งหมดที่ใช้ทำขั้นตอนที่ 1-5 ในลำดับข้างต้น ซึ่งจะแสดงผลเนื้อหาบนหน้าจอได้เร็วที่สุดและยังลดระยะเวลาระหว่างการอัปเดตหน้าจอหลังจากการแสดงผลครั้งแรกด้วย กล่าวคือ อัตราการรีเฟรชจะสูงขึ้นสำหรับเนื้อหาแบบอินเทอร์แอกทีฟ

ความคิดเห็น