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

Ilya Grigorik
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 ในลำดับข้างต้น วิธีนี้จะช่วยให้แสดงผลเนื้อหาบนหน้าจอได้เร็วที่สุดและยังลดระยะเวลาระหว่างการอัปเดตหน้าจอหลังจากการแสดงผลครั้งแรก กล่าวคือ จะมีอัตราการรีเฟรชสูงขึ้นสำหรับเนื้อหาแบบอินเทอร์แอกทีฟ

ความคิดเห็น