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

Ilya Grigorik

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

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

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

สรุป

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

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

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

เบราว์เซอร์จะทำสิ่งต่อไปนี้โดยประมาณเพื่อสร้างแผนผังการแสดงผล

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

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

ดูตัวอย่าง HTML นี้ที่แสดงผลเป็นหน้าเว็บ

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

การคำนวณข้อมูลเลย์เอาต์ตามคำอธิบายก่อนหน้า

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

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

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

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

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

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

หน้าเว็บจะมองเห็นได้ในวิวพอร์ตแล้ว

หน้าเว็บที่แสดงข้อความ &quot;สวัสดี นักเรียนด้านประสิทธิภาพเว็บ!&quot; และแสดงมีมสุนัขน่ารักที่บอกว่าคุณยอดเยี่ยม

สรุปขั้นตอนของเบราว์เซอร์อย่างรวดเร็วได้ดังนี้

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

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

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