RenderingNG

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

Chris Harrelson

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

RenderingNG

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

नॉर्थ स्टार लक्ष्य

RenderingNG को बनाने का मकसद यह है कि ब्राउज़र इंजन को लागू करने और उसके रेंडरिंग एपीआई की बेहतर सुविधाओं से, वेब पर यूज़र एक्सपीरियंस पर असर न पड़े.

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

परफ़ॉर्मेंस में अचानक गिरावट नहीं आनी चाहिए. साथ ही, आपको पहले से मौजूद सुविधाओं के बिना काम नहीं करना पड़ेगा.

यह आसानी से काम करेगा.

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

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

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

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

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

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

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

असल पिरामिड की तरह ही, हर लेवल से ऊपर वाले लेवल के लिए एक मज़बूत बुनियाद मिलती है.

विश्वसनीयता

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

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

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

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

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

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

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

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

wpt.fyi/compat2021 से, मुख्य सुविधाओं के लिए WPTs के पास होने की दर का आकलन करना

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

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

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

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

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

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

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

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

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

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

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

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

जीपीयू एक्सेलेरेशन

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

एक्सटेंसिबिलिटी: काम के लिए सही टूल

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

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

Chromium के समर्थन वाले इन ओपन वेब एपीआई को RenderingNG की मदद से बनाया गया है. पहले इन्हें असंभव माना जाता था.

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

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

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

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

RenderingNG की मदद से, आने वाले समय में ये सुविधाएं भी उपलब्ध होंगी. इनमें हम काफ़ी दिलचस्पी रखते हैं:

• स्क्रोल से जुड़े ऐनिमेशन.
• छिपा हुआ, लेकिन खोजा जा सकने वाला और ऐक्सेस किया जा सकने वाला डीओएम.
• शेयर किए गए एलिमेंट के ट्रांज़िशन.
• कस्टम लेआउट.
• मुख्य थ्रेड से बाहर कॉम्पोज़ करना; थ्रेडिंग और कॉम्पोज़िंग को अलग करना.

RenderingNG में शामिल मुख्य प्रोजेक्ट

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

CompositeAfterPaint

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

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

LayoutNG

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

LayoutNG के बारे में ज़्यादा जानें.

साल	प्रगति
2019	शिप ब्लॉक फ़्लो.
2020	शिपिंग फ़्लेक्स, एडिटिंग.
2021	बाकी सभी आइटम शिप करें.

BlinkNG

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

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

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

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

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

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

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

Viz

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

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

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

OOP-D

प्रोसेस से बाहर का डिसप्ले कंपोजिटर. डिसप्ले कॉम्पोज़िंग, ओएस कंपोजर जैसी ही गतिविधि है. प्रोसेस के बाहर का मतलब है कि इसे वेब पेज की रेंडर प्रोसेस या ब्राउज़र यूज़र इंटरफ़ेस (यूआई) प्रोसेस के बजाय, विज़ प्रोसेस में किया जा रहा है.

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	एचडीआर और कलर में बदलाव किए गए वीडियो को रेंडर करने की सुविधा जोड़ी गई.
2018	Mojo पर आधारित वीडियो डिकोडिंग पाइपलाइन को शिप किया गया.
2019	डिवाइस के डिसप्ले के हिसाब से वीडियो रेंडर करने की पाइपलाइन.
2021	ChromeOS पर, सुरक्षित 4K कॉन्टेंट को रेंडर करने की सुविधा जोड़ी गई.

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

Mojo

Chromium के लिए, नेक्स्ट-जनरेशन IPC सबसिस्टम.

प्लैटफ़ॉर्म

एक कॉन्सेप्ट, जो विज़ प्रोजेक्ट के डिज़ाइन का हिस्सा है.

---

इमेज: यूना क्रावेट.