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

Ilya Grigorik

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

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

สรุป

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

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

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

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

  1. ข้ามผ่านโหนดที่ปรากฏแต่ละโหนดโดยเริ่มต้นที่รากของแผนผัง DOM

    • บางโหนดจะมองไม่เห็น (เช่น แท็กสคริปต์ เมตาแท็ก และอื่นๆ) และจะถูกละไว้ เนื่องจากไม่แสดงในเอาต์พุตที่แสดงผล
    • โหนดบางโหนดถูกซ่อนผ่าน CSS และละเว้นจากโครงสร้างการแสดงผลด้วย ตัวอย่างเช่น โหนด Span ในตัวอย่างข้างต้น ไม่อยู่ในโครงสร้างการแสดงผล เนื่องจากเรามีกฎที่ชัดเจนที่กำหนดคุณสมบัติ "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>

ลองใช้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ความคิดเห็น