สถาปัตยกรรม RenderingNG

Chris Harrelson

ในส่วนนี้ คุณจะเห็นวิธีตั้งค่าคอมโพเนนต์ของ RenderingNG และวิธีที่ไปป์ไลน์การแสดงผลทำงาน

งานที่ต้องทำในการเรนเดอร์มีดังนี้ โดยเริ่มจากระดับสูงสุด

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

เนื้อหาที่จะแสดงผลคือลําดับชั้นของเฟรมสําหรับแท็บเบราว์เซอร์แต่ละแท็บ รวมถึงอินเทอร์เฟซเบราว์เซอร์ และกระแสเหตุการณ์อินพุตดิบจากหน้าจอสัมผัส เมาส์ แป้นพิมพ์ และอุปกรณ์ฮาร์ดแวร์อื่นๆ

แต่ละเฟรมประกอบด้วย

• สถานะ DOM
• CSS
• แคนวาส
• ทรัพยากรภายนอก เช่น รูปภาพ วิดีโอ แบบอักษร และ SVG

เฟรมคือเอกสาร HTML พร้อม URL ของเฟรม หน้าเว็บที่โหลดในแท็บเบราว์เซอร์จะมีเฟรมระดับบนสุด เฟรมย่อยสําหรับ iframe แต่ละรายการที่รวมอยู่ในเอกสารระดับบนสุด และ iframe ย่อยแบบเรียกซ้ำ

เอฟเฟกต์ภาพคือการดำเนินการกราฟิกที่นำมาใช้กับบิตแมป เช่น เลื่อน เปลี่ยนรูปแบบ ตัด ฟิลเตอร์ ความทึบแสง หรือการผสม

คอมโพเนนต์สถาปัตยกรรม

ใน RenderingNG งานเหล่านี้จะแยกออกเป็นหลายระยะและคอมโพเนนต์โค้ดอย่างเป็นเหตุผล คอมโพเนนต์จะปรากฏในกระบวนการต่างๆ ของ CPU, เทรด และคอมโพเนนต์ย่อยภายในเทรดเหล่านั้น แต่ละรายการมีบทบาทสำคัญในการบรรลุความน่าเชื่อถือ ประสิทธิภาพที่ปรับขนาดได้ และความสามารถในการขยายสำหรับเนื้อหาเว็บทั้งหมด

โครงสร้างไปป์ไลน์การแสดงผล

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

ระยะต่างๆ มีดังนี้

1. ภาพเคลื่อนไหว: เปลี่ยนสไตล์ที่คำนวณแล้วและเปลี่ยนแปลงต้นไม้พร็อพเพอร์ตี้เมื่อเวลาผ่านไปตามไทม์ไลน์แบบประกาศ
2. สไตล์: ใช้ CSS กับ DOM และสร้างสไตล์ที่คอมไพล์แล้ว
3. เลย์เอาต์: กำหนดขนาดและตำแหน่งขององค์ประกอบ DOM บนหน้าจอ และสร้างต้นไม้เศษข้อมูลที่แก้ไขไม่ได้
4. การวาดภาพล่วงหน้า: คำนวณต้นไม้พร็อพเพอร์ตี้และทำให้เป็นโมฆะรายการแสดงผลและไทล์พื้นผิว GPU ที่มีอยู่ตามความเหมาะสม
5. เลื่อน: อัปเดตออฟเซตการเลื่อนของเอกสารและองค์ประกอบ DOM ที่เลื่อนได้โดยการทำให้ต้นไม้พร็อพเพอร์ตี้เปลี่ยนแปลง
6. Paint: คำนวณลิสต์การแสดงผลที่อธิบายวิธีแรสเตอร์ไทล์พื้นผิว GPU จาก DOM
7. คอมมิต: คัดลอกต้นไม้พร็อพเพอร์ตี้และรายการการแสดงผลไปยังเธรดคอมโพสิต
8. แบ่งเลเยอร์: แบ่งรายการแสดงออกเป็นรายการเลเยอร์แบบคอมโพสิตสำหรับการแรสเตอร์และภาพเคลื่อนไหวอิสระ
9. เวิร์กเลตแรสเตอร์ ถอดรหัส และเพนต์: เปลี่ยนรายการที่แสดง รูปภาพที่เข้ารหัส และโค้ดเวิร์กเลตเพนต์เป็นไทล์พื้นผิว GPU ตามลำดับ
10. เปิดใช้งาน: สร้างเฟรมคอมโพสิตที่แสดงวิธีวาดและวางตำแหน่งไทล์ GPU บนหน้าจอ พร้อมกับเอฟเฟกต์ภาพ
11. รวม: รวมเฟรมคอมโพสิตจากเฟรมคอมโพสิตที่มองเห็นได้ทั้งหมดเข้าเป็นเฟรมคอมโพสิตส่วนกลางเฟรมเดียว
12. วาด: เรียกใช้เฟรมคอมโพสิตแบบรวมใน GPU เพื่อสร้างพิกเซลบนหน้าจอ

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

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

โครงสร้างกระบวนการและเธรด

กระบวนการของ CPU

การใช้กระบวนการ CPU หลายรายการจะแยกประสิทธิภาพและความปลอดภัยระหว่างเว็บไซต์และสถานะเบราว์เซอร์ รวมถึงแยกความเสถียรและความปลอดภัยจากฮาร์ดแวร์ GPU