RenderingNG

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

Chris Harrelson
Chris Harrelson

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

ภาพร่างองค์ประกอบต่างๆ ของ RenderingNG
RenderingNG

ในสไลด์นี้ คุณจะได้ทราบถึงสิ่งที่เราสร้างขึ้น สาเหตุที่เราสร้างขึ้น และวิธีการทำงาน

เป้าหมายดาวเหนือ

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

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

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

เพียงเท่านี้ก็เรียบร้อย

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

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

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

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

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

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

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

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

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

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

ภาพสเก็ตช์แสดงวิธีการเพิ่มฟีเจอร์ RenderingNG โดยไม่รู้สึกหงุดหงิดมากนัก

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

ภาพร่างจะแสดงลักษณะรูปวงกลมของการเพิ่มฟีเจอร์ รับความคิดเห็น และปรับปรุงความน่าเชื่อถือ

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

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

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

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

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

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

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

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

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

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

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

ประสิทธิภาพที่รองรับการปรับขนาด

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

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

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

การแคช

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

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

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

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

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

Sketch แสดงให้เห็นว่าเมื่อใช้ RenderingNG ได้อย่างมีประสิทธิภาพแม้ในขณะที่ JavaScript ทำงานช้ามาก

การเร่งการประมวลผล GPU

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

ภาพร่างจะแสดงว่าประสิทธิภาพใน RenderingNG ไม่ได้ลดลงมากนัก

ความสามารถในการขยายการใช้งาน: เครื่องมือที่เหมาะสมสำหรับงาน

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

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

API เว็บแบบเปิดต่อไปนี้ซึ่งได้รับการสนับสนุนโดย Chromium เกิดขึ้นได้ด้วย RenderingNG และก่อนหน้านี้เคยได้รับการพิจารณาว่าเป็นสิ่งที่เป็นไปได้

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

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

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

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

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

โปรเจ็กต์สำคัญที่รวมอยู่ใน RenderingNG

รายการโปรเจ็กต์หลักภายใน RenderingNG มีดังนี้

CompositeAfterPaint

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

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

LayoutNG

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

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

ปี ความคืบหน้า
2019 โฟลว์แบบบล็อกเรือ
2020 Flex Ship, การแก้ไข
2021 จัดส่งทุกอย่าง

BlinkNG

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

การเร่งความเร็วของ GPU ในทุกที่

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

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

การเลื่อนชุดข้อความ ภาพเคลื่อนไหว และการถอดรหัส

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

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

วิซ

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

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

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

OOP-D
เครื่องมือประกอบการแสดงผลนอกกระบวนการ การจัดองค์ประกอบโฆษณา Display เป็นกิจกรรมประเภทเดียวกับเครื่องมือประกอบของระบบปฏิบัติการ การนอกกระบวนการหมายถึงการดำเนินการในขั้นตอนของ Viz แทนขั้นตอนการแสดงผลหน้าเว็บหรือกระบวนการ UI ของเบราว์เซอร์
OOP-R
แรสเตอร์นอกกระบวนการ แรสเตอร์จะแปลงรายการที่แสดงเป็นพิกเซล การออกจากกระบวนการหมายถึงการดำเนินการในขั้นตอนของ Viz แทนขั้นตอนการแสดงผลของหน้าเว็บ
SkiaRenderer
การติดตั้งใช้งานคอมโพสิเตอร์ Display ใหม่ที่รองรับการดำเนินการบน API ของ GPU พื้นฐานที่หลากหลาย เช่น Vulkan, D3D12 หรือ Metal

การแสดงผล Canvas แบบแยกชุดข้อความและเร่งการแสดงผล

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

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

VideoNG

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

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

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

โมโจ
ระบบย่อย IPC รุ่นถัดไปสำหรับ Chromium
แพลตฟอร์ม
แนวคิดที่เป็นส่วนหนึ่งของการออกแบบโปรเจ็กต์ Viz

ภาพโดย Una Kravets