RenderingNG

พร้อมรับเนื้อหาเว็บรุ่นถัดไป

Chris Harrelson

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

RenderingNG

คุณจะได้เห็นสิ่งที่เราสร้าง เหตุผลที่เราสร้าง และวิธีการทำงานของฟีเจอร์นี้

เป้าหมายที่เป็นดาวเหนือ

เป้าหมายหลักที่กระตุ้นให้ RenderingNG เกิดขึ้นคือการใช้งานเอ็นจิ้นเบราว์เซอร์และความหลากหลายของ API การเรนเดอร์ไม่ควรเป็นปัจจัยที่จำกัด UX บนเว็บ

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

ไม่ควรมีจุดที่ประสิทธิภาพลดลงอย่างฉับพลัน และคุณไม่ควรต้องแก้ปัญหาเกี่ยวกับฟีเจอร์ในตัวที่ขาดหายไป

ซึ่งควรจะใช้งานได้ทันที

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

• มีฟีเจอร์หลักที่มีประสิทธิภาพสูงในแพลตฟอร์ม อุปกรณ์ และระบบปฏิบัติการต่างๆ
• มีประสิทธิภาพที่คาดการณ์ได้และเชื่อถือได้
• เพิ่มขีดความสามารถของฮาร์ดแวร์ให้สูงสุด (แกนประมวลผล, GPU, ความละเอียดของหน้าจอ, ความถี่ในการรีเฟรช, เรติเซล API ระดับล่าง)
• ทำงานเฉพาะที่จำเป็นในการแสดงเนื้อหาที่มองเห็นได้
• รองรับการออกแบบภาพ ภาพเคลื่อนไหว และรูปแบบการออกแบบการโต้ตอบทั่วไปในตัว
• มี API สําหรับนักพัฒนาแอปเพื่อจัดการค่าใช้จ่ายในการแสดงผลได้อย่างง่ายดาย
• ให้จุดขยายไปป์ไลน์การแสดงผลสำหรับส่วนเสริมของนักพัฒนาซอฟต์แวร์
• เพิ่มประสิทธิภาพเนื้อหาทั้งหมด ไม่ว่าจะเป็น HTML, CSS, Canvas 2 มิติ, Canvas 3 มิติ, รูปภาพ, วิดีโอ และแบบอักษร

การเปรียบเทียบกับเครื่องมือแสดงผลเบราว์เซอร์อื่นๆ

Gecko และ Webkit ได้ใช้สถาปัตยกรรมฟีเจอร์ส่วนใหญ่ที่อธิบายไว้ในบล็อกโพสต์เหล่านี้ด้วย และบางครั้งยังเพิ่มฟีเจอร์เหล่านี้ก่อน Chromium อีกด้วย

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

พีระมิดแห่งความสําเร็จ

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

แต่ละระดับจะเป็นรากฐานที่มั่นคงซึ่งจำเป็นต่อระดับที่สูงขึ้น เช่นเดียวกับพีระมิดในชีวิตจริง

ความน่าเชื่อถือ

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

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

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

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

การทดสอบและเมตริก

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

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

การทดสอบแพลตฟอร์มเว็บเป็นการทดสอบแบบร่วมมือ ตัวอย่างเช่น วิศวกร Chromium ได้เพิ่มการทดสอบ WPT ทั้งหมดประมาณ 10% สำหรับฟีเจอร์ของ CSS ส่วนที่เหลือมาจากผู้ให้บริการเบราว์เซอร์รายอื่นๆ ผู้มีส่วนร่วมอิสระ และผู้เขียนข้อกำหนด การสร้างเว็บที่ทำงานร่วมกันได้นั้นต้องอาศัยความร่วมมือจากทุกฝ่าย

จาก wpt.fyi/compat2021 การวัดอัตราผ่านของ WPT สำหรับฟีเจอร์หลัก

รูปแบบการออกแบบซอฟต์แวร์ที่ดี

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

ประสิทธิภาพที่ปรับขนาดได้

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

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

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

การแคช

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

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

การแยกประสิทธิภาพ

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

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

การเร่งความเร็วด้วย GPU

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

การขยายการทำงาน: เครื่องมือที่เหมาะกับงาน

เมื่อมีความเสถียรและประสิทธิภาพที่ปรับขนาดได้ เราก็พร้อมที่จะสร้างเครื่องมือต่างๆ เพิ่มเติมเพื่อช่วยนักพัฒนาซอฟต์แวร์ขยายส่วนต่างๆ ของ HTML, CSS และ Canvas ในตัว และดำเนินการในลักษณะที่ไม่ลดประสิทธิภาพและความเสถียรที่ได้มาอย่างยากลำบาก

ซึ่งรวมถึง API ในตัวและ API ที่แสดง JavaScript สำหรับกรณีการใช้งานขั้นสูงของการออกแบบที่ปรับเปลี่ยนตามพื้นที่โฆษณา การแสดงผลแบบเป็นขั้นๆ ความลื่นไหลและการตอบสนอง และการแสดงผลแบบแยกเธรด

API เว็บแบบเปิดต่อไปนี้ซึ่ง Chromium สนับสนุนเกิดขึ้นได้จาก RenderingNG และก่อนหน้านี้ถือว่าไม่สามารถทำได้

ทั้งหมดนี้พัฒนาขึ้นโดยใช้ข้อกำหนดแบบเปิดและการทำงานร่วมกันกับพาร์ทเนอร์เว็บแบบเปิด ซึ่งได้แก่ วิศวกรจากเบราว์เซอร์อื่นๆ ผู้เชี่ยวชาญ และนักพัฒนาเว็บ ในบล็อกโพสต์ต่อๆ ไป เราจะเจาะลึกแต่ละหัวข้อเหล่านี้และอธิบายว่า RenderingNG ทําให้สิ่งเหล่านี้เกิดขึ้นได้อย่างไร

• content-visibility: ช่วยเว็บไซต์ในการหลีกเลี่ยงการแสดงผลเนื้อหาที่อยู่นอกหน้าจอได้อย่างง่ายดาย และแคชการแสดงผลสำหรับมุมมองแอปพลิเคชันหน้าเว็บเดียวที่ไม่ได้แสดงอยู่ในปัจจุบัน
• OffscreenCanvas: อนุญาตให้การแสดงผล Canvas (ทั้ง Canvas API 2 มิติและ WebGL) ทำงานบนเธรดของตัวเองเพื่อให้ได้ประสิทธิภาพที่ยอดเยี่ยมและเชื่อถือได้ โปรเจ็กต์นี้ยังเป็นอีกก้าวสําคัญสําหรับเว็บด้วย เพราะเป็น Web API แรกสุดที่อนุญาตให้ JavaScript (หรือ WebAssembly) แสดงผลเอกสารหน้าเว็บหน้าเดียวจากหลายเธรด
• การค้นหาคอนเทนเนอร์: ช่วยให้คอมโพเนนต์เดียวแสดงผลแบบตอบสนองได้ ซึ่งจะปลดล็อกคอมโพเนนต์แบบปลั๊กแอนด์เพลย์ทั้งหมด (ขณะนี้เป็นการใช้งานเวอร์ชันทดลอง)
• การแยกต้นทาง: ช่วยให้เว็บไซต์เลือกการแยกประสิทธิภาพระหว่าง iframe เพิ่มเติมได้
• เวิร์กเลตการวาดนอกเธรดหลัก: ช่วยให้นักพัฒนาแอปขยายวิธีวาดองค์ประกอบได้โดยใช้โค้ดที่ทำงานบนเธรดคอมโพสิต

นอกจาก Web API ที่ชัดเจนแล้ว RenderingNG ยังช่วยให้เราส่ง "ฟีเจอร์อัตโนมัติ" ที่สำคัญมากหลายรายการที่เป็นประโยชน์ต่อทุกเว็บไซต์ได้ ดังนี้

• การแยกเว็บไซต์: วาง iframe ข้ามแหล่งที่มาในกระบวนการ CPU ที่แตกต่างกัน เพื่อแยกความปลอดภัยและประสิทธิภาพให้ดียิ่งขึ้น
• Vulkan, D3D12 และ Metal: ใช้ API ระดับล่างที่ใช้ GPU ได้อย่างมีประสิทธิภาพมากกว่า OpenGL
• แอนิเมชันแบบคอมโพสิตเพิ่มเติม ได้แก่ SVG, สีพื้นหลัง

ฟีเจอร์เพิ่มเติมที่กำลังจะเปิดตัวซึ่ง RenderingNG ไม่ได้บล็อกและเราตื่นเต้นมาก ได้แก่

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

โปรเจ็กต์หลักที่ประกอบกันเป็น RenderingNG

ต่อไปนี้คือรายการโปรเจ็กต์หลักภายใน RenderingNG

CompositeAfterPaint

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

ปี	ความคืบหน้า
2015	แสดงรายการเรือ
2017	จัดส่งการลบล้างใหม่
2018	ต้นไม้พร็อพเพอร์ตี้ของเรือ ส่วนที่ 1
2019	จัดส่งต้นไม้พร็อพเพอร์ตี้ส่วนที่ 2
2021	จัดส่งโปรเจ็กต์เรียบร้อยแล้ว

LayoutNG

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

อ่านเพิ่มเติมเกี่ยวกับ LayoutNG

ปี	ความคืบหน้า
2019	ขั้นตอนการบล็อกการจัดส่ง
2020	จัดส่งฟีเจอร์การแก้ไข
2021	จัดส่งสินค้าอื่นๆ

BlinkNG

เราได้ปรับโครงสร้างและล้างข้อมูลเครื่องมือแสดงผล Blink ออกเป็นระยะของไปป์ไลน์ที่แยกกันอย่างชัดเจน ซึ่งช่วยให้แคชดีขึ้น มีความน่าเชื่อถือมากขึ้น และฟีเจอร์การแสดงผลที่กลับมาอีกครั้งหรือการแสดงผลที่ล่าช้า เช่น การค้นหาระดับการมองเห็นเนื้อหาและคอนเทนเนอร์

การเร่งความเร็วด้วย GPU ในทุกที่

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

ปี	ความคืบหน้า
2014	การรองรับภาพพิมพ์แคนวาส พร้อมใช้งานในเนื้อหาแบบเลือกใช้ใน Android
2016	จัดส่งใน Mac
2017	GPU ใช้ในการแสดงผลหน้าเว็บ Android กว่า 60%
2018	พร้อมให้บริการใน Windows, ChromeOS และ Android Go
2019	แรสเตอร์ GPU แบบใช้เธรด
2020	จัดส่งเนื้อหา Android ที่เหลือ

การเลื่อนแบบเป็นชุด ภาพเคลื่อนไหว และการถอดรหัส

การดำเนินการระยะยาวเพื่อย้ายการเลื่อน ภาพเคลื่อนไหวที่ไม่ทำให้เกิดเลย์เอาต์ และการถอดรหัสรูปภาพทั้งหมดออกจากเธรดหลัก การดำเนินการนี้ยังคงดำเนินอยู่

ปี	ความคืบหน้า
2011	การรองรับเบื้องต้นสำหรับการเลื่อนแบบเป็นชุดและภาพเคลื่อนไหว
2015	การบีบอัดเลเยอร์
2016	การเลื่อนแบบ Universal Overflow
2017	ถอดรหัสรูปภาพในเธรดตัวจัดวางองค์ประกอบ
2018	ภาพเคลื่อนไหวในชุดข้อความตัวจัดวางองค์ประกอบ
2020	คอมโพสิทตำแหน่งคงที่เสมอ
2021	ภาพเคลื่อนไหวการเปลี่ยนรูปแบบเป็นเปอร์เซ็นต์ ภาพเคลื่อนไหว SVG

Viz

กระบวนการแรสเตอร์และการวาดแบบรวมศูนย์สําหรับ Chromium ที่เพิ่มปริมาณงาน เพิ่มประสิทธิภาพหน่วยความจํา และช่วยให้ใช้ความสามารถของฮาร์ดแวร์ได้อย่างคุ้มค่าที่สุด นอกจากนี้ยังมีประโยชน์อื่นๆ ที่นักพัฒนาเว็บไม่ค่อยเห็น แต่ผู้ใช้จะเห็นอย่างชัดเจน เช่น การเลิกบล็อกการแยกเว็บไซต์และการแยกไปป์ไลน์การแสดงผลออกจากการแสดงผล UI ของเบราว์เซอร์

ปี	ความคืบหน้า
2018	OOP-R ที่มาพร้อมกับ Android, Mac และ Windows
2019	OOP-D จัดส่งแล้ว OOP-R จัดส่งทุกที่ (ยกเว้นภาพพิมพ์แคนวาส) SkiaRenderer ที่มาพร้อมกับ Linux
2020	SkiaRenderer ที่มาพร้อมกับ Windows และ Android Vulkan ที่มาพร้อมกับ Android
2021	SkiaRenderer ที่มาพร้อมกับ Mac (และ ChromeOS เร็วๆ นี้)

คําจํากัดความของคําศัพท์ในแผนภูมิด้านบน

OOP-D

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

OOP-R

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

SkiaRenderer

การติดตั้งใช้งานคอมโพสิเตอร์การแสดงผลแบบใหม่ที่รองรับการดำเนินการใน GPU API ต่างๆ ที่อยู่เบื้องหลัง เช่น Vulkan, D3D12 หรือ Metal

การแสดงผลแคนวาสแบบใช้เธรดและแบบเร่ง

นี่เป็นโปรเจ็กต์ที่ทำให้ OffscreenCanvas ใช้งานได้

ปี	ความคืบหน้า
2018	จัดส่ง OffscreenCanvas
2019	ส่ง ImageBitmapRenderingContext
2021	จัดส่ง OOP-R

VideoNG

VideoNG เป็นโครงการระยะยาวที่มุ่งให้บริการการเล่นวิดีโอที่มีประสิทธิภาพ เชื่อถือได้ และมีคุณภาพสูงบนเว็บ

ปี	ความคืบหน้า
2014	เปิดตัวเฟรมเวิร์กการแสดงผลที่ใช้ Mojo
2015	ติดตั้ง Project Butter และการวางซ้อนวิดีโอเพื่อให้การแสดงผลวิดีโอราบรื่นยิ่งขึ้น
2016	เผยแพร่ไปป์ไลน์การถอดรหัสและการเรนเดอร์แบบรวมสำหรับ Android และเดสก์ท็อป
2017	การแสดงผลวิดีโอ HDR และวิดีโอที่แก้สีที่พร้อมใช้งาน
2018	ไปป์ไลน์การถอดรหัสวิดีโอที่ใช้ Mojo ซึ่งพร้อมใช้งาน
2019	ไปป์ไลน์การแสดงผลวิดีโอที่อิงตาม Surface ที่พร้อมใช้งาน
2021	รองรับการแสดงผลเนื้อหาที่ได้รับการคุ้มครองระดับ 4K ใน ChromeOS

คําจํากัดความของคําศัพท์ในแผนภูมิด้านบน

Mojo

ระบบย่อย IPC รุ่นถัดไปสำหรับ Chromium

แพลตฟอร์ม

แนวคิดที่เป็นส่วนหนึ่งของการออกแบบโปรเจ็กต์ภาพ

---

ภาพโดย Una Kravets