RenderingNG

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

Chris Harrelson

ध्यान दें: यह पोस्ट, Chromium रेंडरिंग इंजन पर बनी एक सीरीज़ का हिस्सा है. ज़्यादा जानने के लिए, इस सीरीज़ के बाकी वीडियो देखें.

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

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

RenderingNG

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

• हमारा उत्तर तारा लक्ष्य.
• सफलता का पिरामिड: हमारे काम का मार्गदर्शन करने वाले सिद्धांत और उन सिद्धांतों के उदाहरण.
• रेंडरिंगNG की मदद से, ये सुविधाएं और क्षमताएं उपलब्ध हो सकती हैं.
• रेंडरिंगNG के मुख्य प्रोजेक्ट कॉम्पोनेंट के बारे में खास जानकारी.

नॉर्थ स्टार

ringNG को प्रेरित करने के लिए उत्तरी स्टार का लक्ष्य यह है कि ब्राउज़र इंजन को लागू करने और इसके रेंडरिंग एपीआई की क्षमता का असर, वेब पर UX को सीमित करने वाला न हो.

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

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

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

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

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

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

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

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

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

असल ज़िंदगी के पिरामिड की तरह ही, हर लेवल ऊपर दिए गए लेवल के लिए ज़रूरी आधार देता है.

विश्वसनीयता

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

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

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

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

टेस्टिंग और मेट्रिक

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

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

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

wpt.fyi/compat2021 से, मुख्य सुविधाओं के लिए डब्ल्यूपीटी की पास दर का आकलन किया जा रहा है

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

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

बढ़ाने लायक परफ़ॉर्मेंस

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chromium के साथ काम करने वाले नीचे दिए गए ओपन वेब एपीआई, अच्छा परफ़ॉर्म करने में कामयाब हुए हैं. साथ ही, पहले इन्हें मुमकिन नहीं माना जाता था.

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

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

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

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

आने वाली कुछ ऐसी सुविधाएं जिन्हें रिंगिंग से अनब्लॉक किया गया है और जिन्हें लेकर हम काफ़ी उत्साहित हैं:

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

ringNG को बनाने वाले मुख्य प्रोजेक्ट

नीचे RenderingNG के मुख्य प्रोजेक्ट की सूची दी गई है. बाद में आने वाली ब्लॉग पोस्ट में से हर एक के बारे में विस्तार से बताया जाएगा.

CompositeAfterPaint

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

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

LayoutNG

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

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

BlinkNG

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

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

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

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

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

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

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

विज़

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

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

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

ओओपी-डी

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

ओओपी-आर

प्रोसेस से बाहर रास्टर. रास्टर, डिसप्ले सूचियों को पिक्सल में बदल रहा है. प्रोसेस से बाहर होने का मतलब है कि वेब पेज को रेंडर करने की प्रोसेस के बजाय, उसे Viz प्रोसेस में किया जाए.

SkiaRenderer

एक नया डिसप्ले कंपोज़िटर इंप्लिमेंटेशन जो अलग-अलग बुनियादी जीपीयू एपीआई, जैसे कि Vulkan, D3D12 या मेटल पर एक्ज़ीक्यूशन का समर्थन कर सकता है.

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

यह ऐसा प्रोजेक्ट है जिसने आर्किटेक्चरल चीज़ों पर काम किया, जिसकी वजह से ऑफ़स्क्रीन कैनवस मुमकिन हुआ. यह 2015 में शुरू हुआ था और 2021 में खत्म होगा.

Year	प्रगति
2018	शिप ऑफ़स्क्रीन कैनवस.
2019	शिप ImageBitmaprenderContext.
2021	शिप करें OOP-R.

VideoNG

वेब पर असरदार, भरोसेमंद, और अच्छी क्वालिटी में वीडियो चलाने की लंबे समय तक की गई कोशिश.

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

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

मोजो

Chromium के लिए अगली-पीढ़ी की टेक्नोलॉजी के लिए IPC सबसिस्टम.

प्लैटफ़ॉर्म

एक ऐसी अवधारणा जो Viz प्रोजेक्ट के डिज़ाइन का हिस्सा है.

नतीजा

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

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

Unsplash पर एरिक सॉल्हीम की ओर से ली गई डिवाइस की फ़ोटो

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