RenderingNG

वेब कॉन्टेंट की अगली-पीढ़ी की टेक्नोलॉजी के लिए तैयार है

Chris Harrelson
Chris Harrelson

रेंडरिंग, अगली-पीढ़ी की टेक्नोलॉजी का रेंडरिंग आर्किटेक्चर है. इसकी परफ़ॉर्मेंस पहले के मुकाबले काफ़ी बेहतर है. ReportingNG को आठ साल से भी ज़्यादा समय हो गया है और यह खास तौर पर बनाए गए कई Chromium डेवलपर के सामूहिक काम का प्रतिनिधित्व करता है. यह तेज़, तरल, भरोसेमंद, रिस्पॉन्सिव, और इंटरैक्टिव वेब कॉन्टेंट के लिए बड़ी संख्या में संसाधन उपलब्ध कराता है.

ReportingNG के अलग-अलग एलिमेंट का स्केच
RenderingNG

यहां आपको पता चलेगा कि हमने क्या बनाया, क्यों बनाया, और यह कैसे काम करता है.

नॉर्थ स्टार गोल

रेंडरिंग को बढ़ावा देने के लिए नॉर्थ स्टार लक्ष्य

आपको ब्राउज़र की उन गड़बड़ियों के बारे में चिंता करने की ज़रूरत नहीं है जिनसे सुविधाओं पर भरोसा नहीं किया जा सकता या अपनी साइट की रेंडरिंग में गड़बड़ी हो सकती है.

परफ़ॉर्मेंस में कोई रहस्यमयी चट्टान नहीं होनी चाहिए. साथ ही, आपको ऐप्लिकेशन में पहले से मौजूद सुविधाओं को ठीक करने की ज़रूरत नहीं है.

यह काम करना चाहिए.

इस नॉर्थ स्टार के लक्ष्य को पूरा करने के लिए, रेंडरिंग में बहुत बड़ा कदम है. रेंडर करने से पहले, हम रेंडरिंग की सुविधाएं जोड़ सकते थे और परफ़ॉर्मेंस को बेहतर बना सकते थे. लेकिन इन सुविधाओं को डेवलपर के लिए भरोसेमंद बनाने में मुश्किल हुई. इस वजह से, परफ़ॉर्मेंस में कई उतार-चढ़ाव देखने को मिले. अब हमारे पास एक ऐसा आर्किटेक्चर है जो सिस्टम की मदद से, इनमें से कई समस्याओं को दूर करता है. साथ ही, उन ऐडवांस सुविधाओं को अनब्लॉक कर देता है जिन्हें पहले संभव नहीं था. इससे:

  • इस पर अलग-अलग प्लैटफ़ॉर्म, डिवाइस, और ऑपरेटिंग सिस्टम के कॉम्बो में रॉक-सॉलिड कोर फ़ीचर मिलते हैं.
  • इसकी परफ़ॉर्मेंस के बारे में अनुमान लगाया जा सकता है और वह भरोसेमंद है.
  • हार्डवेयर क्षमताओं (कोर, जीपीयू, स्क्रीन रिज़ॉल्यूशन, रीफ़्रेश दरें, लो-लेवल रास्टर एपीआई) के इस्तेमाल को बढ़ाती है.
  • सिर्फ़ वही काम करता है जो दिखने वाले कॉन्टेंट को दिखाने के लिए ज़रूरी होता है.
  • इसमें सामान्य विज़ुअल डिज़ाइन, ऐनिमेशन, और इंटरैक्शन डिज़ाइन पैटर्न के साथ काम करने की सुविधा पहले से मौजूद है.
  • रेंडरिंग की लागत को आसानी से मैनेज करने के लिए, डेवलपर एपीआई उपलब्ध कराता है.
  • डेवलपर ऐड-इन के लिए रेंडरिंग पाइपलाइन एक्सटेंशन पॉइंट देता है.
  • हर तरह का कॉन्टेंट ऑप्टिमाइज़ करता है—एचटीएमएल, सीएसएस, 2D कैनवस, 3D कैनवस, इमेज, वीडियो, और फ़ॉन्ट.

अन्य ब्राउज़र रेंडरिंग इंजन से तुलना

गेको और वेबकिट ने इन ब्लॉग पोस्ट में बताई गई ज़्यादातर आर्किटेक्चरल सुविधाएं भी लागू की हैं. कुछ मामलों में इन्हें Chromium से पहले भी जोड़ा है.

तेज़ी से बढ़ता और ज़्यादा भरोसेमंद ब्राउज़र होने से जश्न मनाया जाता है और उसका असल ज़िंदगी पर असर पड़ता है. आखिरी लक्ष्य सभी ब्राउज़र के लिए बेसलाइन को बेहतर बनाना है, ताकि डेवलपर इस पर भरोसा कर सकें.

सफलता का पिरामिड

मेरा मानना है कि सफलता तब मिलती है, जब पहले पहुंचने पर विश्वसनीयता हो, फिर परफ़ॉर्मेंस को बढ़ाया जा सके, और आखिर में एक्सटेंशन की सुविधा का इस्तेमाल किया जाए.

पिरामिड के ऊपर लेबल लगा है भरोसेमंद

असल पिरामिड की तरह ही, हर लेवल ऊपर के लेवल के लिए एक ठोस आधार उपलब्ध कराता है.

विश्वसनीयता

स्केच में यह दिखाया गया है कि रेंडरिंग में और ज़्यादा झंझट के बिना, रेंडर करने की सुविधाओं को कैसे जोड़ा जा सकता है

अगर उपयोगकर्ताओं को शानदार और जटिल अनुभव मिलना चाहिए, तो सबसे पहले हमें एक मज़बूत प्लैटफ़ॉर्म की ज़रूरत है. ऐप्लिकेशन की मुख्य सुविधाएं और आधार को सही तरीके से काम करना चाहिए और समय के साथ काम करते रहना चाहिए. साथ ही, यह भी ज़रूरी है कि वे सुविधाएं अच्छी तरह से काम करें और उनमें कोई गड़बड़ी न हो या कोई गड़बड़ी न हो.

स्केच में अलग-अलग तरह की सुविधाएं जोड़ने, सुझाव पाने, और लोगों का भरोसा बढ़ाने के बारे में बताया गया है

इस वजह से रेंडरिंग में, भरोसा, रेंडरिंग का सबसे अहम हिस्सा होता है. अच्छी जाँच, क्वालिटी फ़ीडबैक लूप, मेट्रिक, और सॉफ़्टवेयर डिज़ाइन पैटर्न की वजह से भरोसा होता है.

यह समझने के लिए कि मेरे हिसाब से विश्वसनीयता कितनी अहम है, हमने पिछले आठ सालों में इस हिस्से को ठीक करने में ज़्यादा समय लगाया है. सबसे पहले, हमने सिस्टम के बारे में गहराई से जानकारी हासिल की. हमने पाया कि इसमें कमियों के बारे में गड़बड़ियों की रिपोर्ट मौजूद हैं और उन्हें ठीक किया गया. साथ ही, बेहतर टेस्ट को बूटस्ट्रैप किया गया. साथ ही, साइटों की परफ़ॉर्मेंस से जुड़ी ज़रूरतों और Chromium की परफ़ॉर्मेंस की सीमाओं के बारे में भी जाना. इसके बाद, हमने ध्यान से और ज़रूरत के हिसाब से, मुख्य डिज़ाइन पैटर्न और डेटा स्ट्रक्चर को डिज़ाइन और रोल आउट किया. इसके बाद ही, हम रिस्पॉन्सिव डिज़ाइन, स्केलेबिलिटी, और रेंडरिंग को पसंद के मुताबिक बनाने के लिए, अगली-पीढ़ी की टेक्नोलॉजी इस्तेमाल करने के लिए तैयार थे.

स्केच ग्राफ़ में समय के साथ विश्वसनीयता, परफ़ॉर्मेंस, और एक्सटेंशन में होने वाले सुधार को दिखाया गया है

इसका मतलब यह नहीं है कि उस समय Chromium में कुछ भी बेहतर नहीं हुआ था. असल में, उलटा ही सही है! उन सालों में विश्वसनीयता और परफ़ॉर्मेंस में लगातार बढ़ोतरी हुई, क्योंकि हमने हर सुधार को सिलसिलेवार तरीके से लागू किया.

जांच और मेट्रिक

पिछले आठ सालों में, हमने लाखों यूनिट, परफ़ॉर्मेंस, और इंटिग्रेशन टेस्ट जोड़े हैं. इसके अलावा, हमने ऐसी कई मेट्रिक डेवलप की हैं जिनसे यह पता चलता है कि लोकल टेस्टिंग, परफ़ॉर्मेंस के मानदंड, और असल साइटों पर, असल उपयोगकर्ताओं और डिवाइसों पर Chromium की रेंडरिंग कैसे काम करती है.

लेकिन, इस बात से कोई फ़र्क़ नहीं पड़ता कि रेंडरिंग कितनी शानदार है या किसी दूसरे ब्राउज़र का रेंडरिंग इंजन है. अगर ब्राउज़र के काम करने के तरीके में कई बग या अंतर हैं, तो वेब के लिए इसे डेवलप करना आसान नहीं होगा. इसे ठीक करने के लिए, हम वेब प्लैटफ़ॉर्म जांच का ज़्यादा से ज़्यादा इस्तेमाल भी करेंगे. ये सभी टेस्ट, वेब प्लैटफ़ॉर्म के इस्तेमाल के उस पैटर्न की पुष्टि करते हैं जिसे सभी ब्राउज़र को पास करना चाहिए. हम मेट्रिक पर बारीकी से नज़र भी रखते हैं, ताकि वे समय के साथ ज़्यादा से ज़्यादा टेस्ट पास कर पाएं और अन्य डिवाइसों के साथ काम करने की क्षमता को बढ़ा सकें.

वेब प्लैटफ़ॉर्म जांच साथ मिलकर काम करती है. उदाहरण के लिए, Chromium के इंजीनियरों ने सीएसएस की सुविधाओं के लिए, कुल WPT जांचों में से सिर्फ़ 10% हिस्सा जोड़ा है; बाकी ब्राउज़र वेंडर, योगदान देने वाले स्वतंत्र रूप से काम करने वाले लोग, और खास लेखक करते हैं. इंटरऑपरेबल वेब को बढ़ावा देने के लिए गांव की ज़रूरत पड़ती है!

अलग-अलग इंजन में पास होने की जांच करना
wpt.fei/compat2021 से, मुख्य सुविधाओं के लिए WPT के पास रेट को मेज़र किया जा रहा है

अच्छे सॉफ़्टवेयर डिज़ाइन पैटर्न

अगर कोड समझने में आसान हो, तो अच्छी क्वालिटी का सॉफ़्टवेयर डिलीवर करना बहुत आसान होता है. इसे इस तरह डिज़ाइन किया जाता है कि गड़बड़ी की संभावना कम हो. अगले ब्लॉग पोस्ट में, रेप्रिंगंग के सॉफ़्टवेयर डिज़ाइन के बारे में हमें और भी बहुत कुछ बताना होगा.

बड़े स्तर पर परफ़ॉर्मेंस

स्पीड, मेमोरी, और पावर के इस्तेमाल से जुड़े डाइमेंशन में बेहतरीन परफ़ॉर्मेंस हासिल करना, रेंडरिंगजी (रेंडरिंग) का दूसरा सबसे अहम पहलू है. हम चाहते हैं कि सभी वेब साइटों के साथ इंटरैक्शन आसान और रिस्पॉन्सिव हों, फिर भी डिवाइस की स्थिरता को खतरा न हो.

हमें सिर्फ़ परफ़ॉर्मेंस नहीं चाहिए, हम चाहते हैं कि परफ़ॉर्मेंस बढ़ाई जा सके. यह ऐसा आर्किटेक्चर है जो लो-एंड और हाई-एंड मशीन के साथ-साथ सभी ओएस प्लैटफ़ॉर्म पर बेहतर परफ़ॉर्म करता है. मेरे पास इस स्केलिंग को बढ़ाने का मतलब है, क्योंकि हार्डवेयर डिवाइस मिलने वाली सभी सुविधाओं का फ़ायदा लेकर उसे स्केल और कम कर सकते हैं. इससे क्षमता बढ़ जाती है और ज़रूरत पड़ने पर सिस्टम पर मांग कम होती है.

वहां पहुंचने के लिए, हमें कैश मेमोरी, परफ़ॉर्मेंस आइसोलेशन, और जीपीयू के हार्डवेयर से तेज़ी लाने की सुविधा का ज़्यादा से ज़्यादा इस्तेमाल करना था. आइए, दोनों को बारी-बारी से देखते हैं. इसे ठोस बनाने के लिए, आइए इस बारे में देखते हैं कि उनमें से हर एक वेब पेज पर एक बेहद ज़रूरी इंटरैक्शन की परफ़ॉर्मेंस में कैसे योगदान देता है: स्क्रोलिंग.

कैश मेमोरी में सेव करना

वेब जैसे डाइनैमिक और इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) प्लैटफ़ॉर्म में, कैशिंग परफ़ॉर्मेंस को बेहतर बनाने का सबसे अहम तरीका है. किसी ब्राउज़र में कैश मेमोरी का सबसे लोकप्रिय तरीका एचटीटीपी कैश है. हालांकि, रेंडरिंग में कई कैश मेमोरी भी होती हैं. स्क्रोल करने के लिए सबसे ज़रूरी कैश मेमोरी, कैश मेमोरी में सेव किए गए जीपीयू टेक्सचर और डिसप्ले सूचियां हैं. इससे बैटरी के तेज़ी से खर्च होने को कम करने के साथ-साथ, अलग-अलग डिवाइसों पर अच्छी तरह से काम करने के साथ-साथ स्क्रोल करने की सुविधा भी बहुत तेज़ होती है.

कैश मेमोरी में सेव होने की सुविधा से, स्क्रोल करने के लिए बैटरी लाइफ़ और ऐनिमेशन फ़्रेम रेट में मदद मिलती है. हालांकि, इससे भी ज़रूरी यह है कि यह मुख्य थ्रेड से परफ़ॉर्मेंस आइसोलेशन को अनब्लॉक करती है.

परफ़ॉर्मेंस आइसोलेशन

आधुनिक डेस्कटॉप कंप्यूटर पर, आपको बैकग्राउंड ऐप्लिकेशन के काम करने के तरीके को धीमा करने के बारे में चिंता करने की ज़रूरत नहीं है. यह पहले से ही एक साथ कई काम करने की वजह से होता है. इसमें परफ़ॉर्मेंस को अलग-अलग तरह से रखा जाता है: यह पक्का करें कि स्वतंत्र काम एक-दूसरे की रफ़्तार को धीमा न करें.

वेब पर, परफ़ॉर्मेंस को अलग-अलग रखने का सबसे अच्छा उदाहरण स्क्रोल करना है. जिन वेबसाइटों में बहुत ज़्यादा JavaScript होती है उन पर स्क्रोल करना बहुत आसान हो सकता है. ऐसा इसलिए, क्योंकि यह अलग थ्रेड पर चलता है और इसे JavaScript और लेआउट थ्रेड पर निर्भर होना ज़रूरी नहीं होता. हम रेंडरिंग में बहुत मेहनत करते हैं, ताकि यह पक्का कर सकें कि हर संभव स्क्रोल को थ्रेड किया गया है. इसके लिए कैश मेमोरी का इस्तेमाल किया जाता है, जो डिसप्ले सूची के अलावा, मुश्किल स्थितियों में भी सामने आ जाता है. उदाहरण के लिए, तय और स्टिकी पोज़िशन वाले एलिमेंट दिखाने वाला कोड, पैसिव इवेंट लिसनर, और अच्छी क्वालिटी की टेक्स्ट रेंडरिंग.

स्केच से पता चलता है कि रेस्विंगंग के दौरान परफ़ॉर्मेंस अच्छी नहीं रहती, भले ही JavaScript बहुत धीमी हो.

जीपीयू की रफ़्तार

जीपीयू से, पिक्सल जनरेट करने और स्क्रीन पर ड्रॉइंग करने की प्रोसेस बहुत तेज़ी से होती है. कई मामलों में, हर पिक्सल को एक दूसरे पिक्सल के साथ ड्रॉ किया जा सकता है, जिससे इंटरनेट की स्पीड बहुत ज़्यादा बढ़ जाती है. ReportingNG का एक मुख्य कॉम्पोनेंट जीपीयू रास्टर है और इसे हर जगह ड्रॉ किया जाता है. यह वेब कॉन्टेंट को रेंडर और ऐनिमेट करने की प्रोसेस को तेज़ करने के लिए, सभी प्लैटफ़ॉर्म और डिवाइसों पर जीपीयू का इस्तेमाल करता है. यह खास तौर पर, कम कीमत वाले या महंगे डिवाइसों पर अहम होता है. इन डिवाइसों में, डिवाइस के अन्य हिस्सों की तुलना में ज़्यादा क्षमता वाला जीपीयू होता है.

स्केच से पता चलता है कि रेंडर करने के तरीके के इस्तेमाल से परफ़ॉर्मेंस में ज़्यादा गिरावट नहीं आती है.

विस्तार: काम के लिए सही टूल

जब हमें भरोसेमंद और बढ़ाने लायक परफ़ॉर्मेंस मिल जाती है, तो अब हम डेवलपर की मदद करने के लिए ऐसे टूल बनाने के लिए तैयार हैं जो एचटीएमएल, सीएसएस, और कैनवस के बिल्ट-इन हिस्सों को बेहतर बनाते हैं. साथ ही, ऐसे तरीके भी हैं जिनसे बेहतर परफ़ॉर्मेंस और विश्वसनीयता को कम किया जा सकता है.

इसमें रिस्पॉन्सिव डिज़ाइन, प्रोग्रेसिव रेंडरिंग, स्मूदनेस और रिस्पॉन्सिवनेस, और थ्रेड वाली रेंडरिंग के बेहतर इस्तेमाल के लिए, बिल्ट-इन और JavaScript की सुविधा वाले एपीआई शामिल हैं.

नीचे दिए गए ओपन वेब एपीआई, जो Chromium के साथ काम करते हैं, वे रेस्विंगंग के ज़रिए बनाए गए हैं और पहले इन्हें संभव नहीं माना जाता था.

इन सभी टूल को ओपन वेब पार्टनर के साथ मिलकर डेवलप किया गया था. ये दूसरे ब्राउज़र के इंजीनियर, विशेषज्ञों, और वेब डेवलपर के साथ मिलकर बनाए गए थे. बाद के ब्लॉग पोस्ट में, हम इन सभी की गहराई से चर्चा करेंगे और यह बताएंगे कि रेस् मिंगंग ने इन्हें कैसे संभव बनाया है.

  • कॉन्टेंट देखना: इससे, साइटों को ऑफ़स्क्रीन कॉन्टेंट के लिए आसानी से रेंडर होने से बचा जा सकता है. साथ ही, एक पेज के उन ऐप्लिकेशन व्यू के लिए कैश रेंडरिंग से बचा जा सकता है जो फ़िलहाल नहीं दिखाए गए हैं.
  • OffscreenCanvas: कैनवस रेंडरिंग (2D कैनवस API और WebGL दोनों) को अपने थ्रेड पर चलाने की सुविधा देता है, ताकि यह सही तरीके से बेहतरीन परफ़ॉर्म कर सके. यह प्रोजेक्ट, वेब के लिए एक और बड़ा माइलस्टोन है. यह पहला ऐसा वेब एपीआई है जो JavaScript (या WebAssembly!) को कई थ्रेड से एक वेब पेज दस्तावेज़ रेंडर करने की अनुमति देता है.
  • कंटेनर क्वेरी: एक कॉम्पोनेंट को रिस्पॉन्सिव तरीके से खुद को पेश करने की अनुमति देती है. साथ ही, यह प्लग-ऐंड-प्ले कॉम्पोनेंट की पूरी दुनिया को अनब्लॉक कर देती है (फ़िलहाल, यह सुविधा को प्रयोग के तौर पर लागू किया गया है).
  • ऑरिजिन आइसोलेशन: इसकी मदद से, साइटों को iframe के बीच ज़्यादा परफ़ॉर्मेंस आइसोलेशन के लिए ऑप्ट इन किया जा सकता है.
  • ऑफ़-मेन-थ्रेड पेंट वर्कलेट: यह डेवलपर को कंपोज़िटर थ्रेड पर चलने वाले कोड की मदद से, एलिमेंट को पेंट करने का तरीका बढ़ाने का तरीका देता है.

साफ़ तौर पर वेब एपीआई के अलावा, रेंडर करने से हमें कई अहम "अपने-आप काम करने वाली सुविधाएं" भेजने में मदद मिली, जिनसे सभी साइटों को फ़ायदा मिलता है:

  • साइट आइसोलेशन: बेहतर सुरक्षा और परफ़ॉर्मेंस आइसोलेशन के लिए, क्रॉस-ऑरिजिन iframe को अलग-अलग सीपीयू प्रोसेस में डालता है.
  • Vulkan, D3D12, और मेटल: कम लेवल वाले ऐसे एपीआई का फ़ायदा लेते हैं जो OpenGL की तुलना में ज़्यादा बेहतर तरीके से जीपीयू इस्तेमाल करते हैं.
  • ज़्यादा कंपोज़िट ऐनिमेशन: SVG, बैकग्राउंड का रंग.

हम रेंडरिंग के ज़रिए, आने वाली जिन सुविधाओं को अनब्लॉक कर रहे हैं और जिन्हें स्वीकार करने में हमें बेहद खुशी हो रही है, ये सुविधाएं यहां दी गई हैं:

रेस् विंगिंगजी बनाने के लिए इस्तेमाल होने वाले खास प्रोजेक्ट

ReportingNG में मौजूद मुख्य प्रोजेक्ट की सूची यहां दी गई है.

CompositeAfterPaint

CompositeAfterPaint, कंपोज़िटिंग के स्टाइल, लेआउट, और पेंट से कंपोज़िटिंग को अलग कर देता है. इससे परफ़ॉर्मेंस बेहतर हो जाती है और परफ़ॉर्मेंस का अनुमान लगाया जा सकता है. साथ ही, थ्रूपुट भी बढ़ता है और परफ़ॉर्मेंस से समझौता किए बिना कम मेमोरी का इस्तेमाल होता है.

साल प्रगति
2015 डिसप्ले की सूचियां भेजें.
2017 अमान्य अमान्य होने की सूचना भेजें.
2018 शिप प्रॉपर्टी ट्री पार्ट 1.
2019 शिप प्रॉपर्टी ट्री पार्ट 2.
2021 प्रोजेक्ट भेजने का काम पूरा हो गया.

LayoutNG

सभी लेआउट एल्गोरिदम को दोबारा लिखता है, ताकि उन पर ज़्यादा भरोसा किया जा सके और परफ़ॉर्मेंस के बारे में पहले से अनुमान लगाया जा सके.

LayoutNG के बारे में और पढ़ें.

साल प्रगति
2019 शिप ब्लॉक फ़्लो.
2020 शिप फ़्लेक्स, बदलाव कर रहा है.
2021 बाकी सब कुछ भेजें.

BlinkNG

हमने ब्लिंक रेंडरिंग इंजन को साफ़ तौर पर अलग किए गए पाइपलाइन चरणों में फिर से व्यवस्थित किया है और उन्हें ठीक किया है. इससे बेहतर कैश मेमोरी, बेहतर विश्वसनीयता, और कॉन्टेंट देखने और देर से रेंडर होने की सुविधाओं में मदद मिलती है. जैसे, कॉन्टेंट देखना और कंटेनर क्वेरी.

हर जगह जीपीयू ऐक्सेलरेशन

जीपीयू से तेज़ी से काम करने की सुविधा से, ज़्यादातर कॉन्टेंट की स्पीडअप बढ़ जाती है, क्योंकि हर पिक्सल को साथ-साथ प्रोसेस किया जा सकता है. यह कम कीमत वाले डिवाइसों पर परफ़ॉर्मेंस को बेहतर बनाने का भी असरदार तरीका है, जिनमें आम तौर पर जीपीयू होता है.

साल प्रगति
2014 कैनवस सहायता. Android पर ऑप्ट-इन कॉन्टेंट भेजने पर शिप किया गया.
2016 Mac पर भेजें.
2017 Android के 60% से ज़्यादा पेज व्यू के लिए, जीपीयू का इस्तेमाल किया जाता है.
2018 Windows, ChromeOS, और Android Go पर भेजें.
2019 थ्रेड किया गया जीपीयू रास्टराइज़ेशन.
2020 बाकी का Android कॉन्टेंट भेजें.

थ्रेड वाली स्क्रोलिंग, ऐनिमेशन, और डिकोड

यह लंबे समय तक स्क्रोल करके, बिना लेआउट वाले ऐनिमेशन, और इमेज को मुख्य थ्रेड से अलग करने की सुविधा देता है. यह चल रहा है.

साल प्रगति
2011 थ्रेड वाले स्क्रोल और ऐनिमेशन के लिए शुरुआती सहायता.
2015 लेयर स्क्वॉशिंग.
2016 यूनिवर्सल ओवरफ़्लो स्क्रोलिंग.
2017 कंपोज़िटर थ्रेड पर इमेज डीकोड करता है.
2018 कंपोज़िटर थ्रेड पर इमेज ऐनिमेशन.
2020 हमेशा कंपोज़िट तय-पोज़ीशन.
2021 ऐनिमेशन और SVG ऐनिमेशन में प्रतिशत के हिसाब से बदलाव.

विज़

Chromium के लिए एक ही जगह पर रास्टर रास्टर और ड्रॉ करने की प्रोसेस, जो डेटा की क्षमता को बढ़ाती है, मेमोरी को ऑप्टिमाइज़ करती है, और हार्डवेयर की सुविधाओं का बेहतर तरीके से इस्तेमाल करने की सुविधा देती है. इसके ऐसे अन्य फ़ायदे भी हैं जो वेब डेवलपर को कम दिखते हैं, लेकिन सभी को ही दिखते हैं. जैसे, साइट आइसोलेशन को अनब्लॉक करना और ब्राउज़र यूज़र इंटरफ़ेस (यूआई) रेंडरिंग से रेंडरिंग पाइपलाइन को अलग करना.

साल प्रगति
2018 OOP-R की डिलीवरी Android, Mac, और Windows पर की जाएगी.
2019 OOP-D की शिपिंग की गई. OOP-R को हर जगह शिप किया गया (कैनवस को छोड़कर). SkiaRenderer, Linux पर शिप किया गया.
2020 SkiaRenderer, Windows और Android पर शिप किया जाता है. Vulkan को Android पर भेजा गया.
2021 SkiaRenderer, Mac (और जल्द ही ChromeOS) पर शिप किया जाएगा.

ऊपर दिए गए चार्ट में शब्दों की परिभाषाएं:

ओओपी-डी
खराब डिसप्ले कंपोज़िटर. डिसप्ले कंपोज़िटिंग, एक ही तरह की गतिविधि है जो किसी ओएस कंपोज़िटर में होती है. प्रोसेस से बाहर होने का मतलब है कि वेब पेज की रेंडर प्रोसेस या ब्राउज़र यूज़र इंटरफ़ेस (यूआई) प्रोसेस के बजाय, इसे Viz प्रोसेस में पूरा करना.
ओओपी-आर
प्रोसेस से बाहर का रास्टर. रास्टर डिसप्ले सूचियों को पिक्सल में बदल रहा है. प्रोसेस से बाहर का मतलब है, वेब पेज की रेंडर प्रोसेस के बजाय विज़ प्रोसेस में करना.
SkiaRenderer
नया डिसप्ले कंपोज़िटर लागू करना, जो अलग-अलग जीपीयू एपीआई पर काम कर सके. जैसे, Vulkan, D3D12 या Metal.

थ्रेडेड और एक्सेलरेटेड कैनवस रेंडरिंग

इस प्रोजेक्ट की वजह से ऑफ़स्क्रीन कैनवस मुमकिन हुआ.

साल प्रगति
2018 ऑफ़स्क्रीन कैनवस शिप करें.
2019 ImageBitmapReportingContext भेजें.
2021 OOP-R शिप करें.

VideoNG

VideoNG, वेब पर कुशल, भरोसेमंद, और अच्छी क्वालिटी के वीडियो चलाने की सुविधा देने के लिए लंबे समय तक काम करने वाली एक पहल है.

साल प्रगति
2014 मोजो-आधारित रेंडरिंग फ़्रेमवर्क पेश किया गया.
2015 बेहतर वीडियो रेंडरिंग के लिए प्रोजेक्ट बटर और वीडियो ओवरले भेज दिए गए हैं.
2016 Android और डेस्कटॉप के लिए एक साथ डिकोड करने और रेंडर करने वाले पाइपलाइन भेजे गए.
2017 एचडीआर और रंग में सुधार करके बनाई गई वीडियो रेंडरिंग भेज दी गई है.
2018 मोजो पर आधारित वीडियो डिकोड करने की पाइपलाइन भेज दी गई है.
2019 सतह पर आधारित वीडियो रेंडरिंग पाइपलाइन भेजी गई.
2021 ChromeOS पर 4K सुरक्षित कॉन्टेंट रेंडरिंग की सुविधा भेजी गई.

ऊपर दिए गए चार्ट में शब्दों की परिभाषाएं:

मोजो
Chromium के लिए, अगली-पीढ़ी की टेक्नोलॉजी का आईपीसी सबसिस्टम.
प्लैटफ़ॉर्म
एक ऐसा सिद्धांत जो Viz प्रोजेक्ट के डिज़ाइन का हिस्सा है.

ऊना क्रेवेट्स के इलस्ट्रेशन.