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

Ilya Grigorik

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

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

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

สรุป

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

ก่อนอื่น เบราว์เซอร์จะรวม 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>

ลองใช้

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

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

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

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

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

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

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

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

หน้าเว็บปรากฏในวิวพอร์ตแล้ว

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

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

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

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

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

ความคิดเห็น