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

Ilya Grigorik

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

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

ในส่วนการสร้างโมเดลออบเจ็กต์ก่อนหน้านี้ เราได้สร้าง 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 สามารถให้ข้อมูลเชิงลึกเกี่ยวกับทั้ง 3 ขั้นตอนที่อธิบายไว้ก่อนหน้านี้ ตรวจสอบระยะการวางเลย์เอาต์ของตัวอย่าง "Hello World" ต้นฉบับ

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

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

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

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

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

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

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

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

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

ความคิดเห็น