Blink क्या है?

Sam Dutton

वेब की खास बातों में से एक यह है कि इसे अलग-अलग कॉम्पोनेंट से बनाया जा सकता है. वेब पेजों में कई तरह के संसाधन शामिल होते हैं. ये संसाधन अलग-अलग ऑरिजिन से मिल सकते हैं.

Blink, Chromium पर आधारित ब्राउज़र के लिए रेंडरिंग इंजन के तौर पर काम करता है. इनमें Chrome, Android WebView, Microsoft Edge, Opera, और Brave शामिल हैं.

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

Blink, वेब पेज को कैसे रेंडर करता है?

Blink, रेंडरिंग की प्रोसेस शुरू करता है. इसके लिए, वह एचटीएमएल, सीएसएस, JavaScript, वीडियो, और इमेज जैसे सभी ज़रूरी रिसॉर्स इकट्ठा करता है. इन संसाधनों को वापस पाने के लिए, Blink, Chromium और उसके ऑपरेटिंग सिस्टम में नेटवर्क स्टैक के साथ इंटरैक्शन मैनेज करता है.

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

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

यहां दिए गए डायग्राम में, रेंडरिंग टास्क की पाइपलाइन के चरणों के बारे में बताया गया है. इसमें हर चरण में शामिल कॉम्पोनेंट, प्रोसेस, और संसाधनों के बारे में भी बताया गया है. Blink को बहुत काम करना है!

ग्राफ़िक रेंडर करना

Blink, ओपन सोर्स Skia ग्राफ़िक्स इंजन का इस्तेमाल करता है. इससे कंप्यूटर या मोबाइल डिवाइस के ग्राफ़िक्स हार्डवेयर के साथ इंटरैक्ट किया जा सकता है.

Skia, सामान्य एपीआई उपलब्ध कराता है. ये एपीआई, अलग-अलग हार्डवेयर और सॉफ़्टवेयर प्लैटफ़ॉर्म पर काम करते हैं. यह Google Chrome और कई अन्य प्रॉडक्ट के लिए, ग्राफ़िक्स इंजन के तौर पर काम करता है.

Skia, अलग-अलग ऑपरेटिंग सिस्टम और डिवाइसों के साथ काम करने के लिए, ग्राफ़िक्स लाइब्रेरी का इस्तेमाल करता है. इनमें OpenGL, Vulkan, और DirectX शामिल हैं. साथ ही, यह प्लैटफ़ॉर्म में होने वाले बदलावों के साथ भी काम करता है. Skia जिस लाइब्रेरी का इस्तेमाल करता है वह इस बात पर निर्भर करती है कि वह किस प्लैटफ़ॉर्म पर चल रहा है. जैसे, मोबाइल पर Android या डेस्कटॉप पर Windows.

JavaScript को पार्स और एक्ज़ीक्यूट करना

JavaScript और WebAssembly कोड को पार्स और एक्ज़ीक्यूट करने के लिए, Blink V8 का इस्तेमाल करता है. यह एक ओपन-सोर्स इंजन है, जिसे Chromium प्रोजेक्ट ने बनाया है.

V8 की मदद से डेवलपर, JavaScript या WebAssembly कोड का इस्तेमाल करके, ब्राउज़र की सुविधाओं को ऐक्सेस कर सकता है. उदाहरण के लिए: डॉक्यूमेंट ऑब्जेक्ट मॉडल में बदलाव करने के लिए. यह किसी दस्तावेज़ का इंटरनल वर्शन होता है, जिसे Blink, एचटीएमएल कोड से बनाता है.

V8, JavaScript को JavaScript स्टैंडर्ड के मुताबिक प्रोसेस करता है. इसे ECMAScript कहा जाता है.

मानकों के मुताबिक रेंडर करना

V8, JavaScript को JavaScript स्टैंडर्ड के मुताबिक प्रोसेस करता है. इसे ECMAScript कहा जाता है. Blink जैसे रेंडरिंग इंजन को इस तरह से डिज़ाइन किया गया है कि वे वेब स्टैंडर्ड को एक साथ लागू कर सकें. वेब स्टैंडर्ड की वजह से, डेवलपर और आम उपयोगकर्ताओं को यह भरोसा होता है कि वेब पेज ठीक से काम करते हैं. इससे कोई फ़र्क़ नहीं पड़ता कि वे किस ब्राउज़र का इस्तेमाल कर रहे हैं.

Blink, ब्राउज़र और भाषा की सुविधाओं के लिए तय किए गए स्पेसिफ़िकेशन का पालन करता है. ये स्पेसिफ़िकेशन, एचटीएमएल, सीएसएस, और DOM जैसे वेब स्टैंडर्ड में तय किए गए हैं.

एचटीएमएल और डीओएम

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

इंटरफ़ेस स्पेसिफ़िकेशन, WebIDL में लिखा गया है: Web Interface Definition Language. नीचे दिया गया WebIDL, एचटीएमएल स्टैंडर्ड में HTMLImageElement की परिभाषा का हिस्सा है.

[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
 [HTMLConstructor] constructor();

 [CEReactions] attribute DOMString alt;
 [CEReactions] attribute USVString src;
 [CEReactions] attribute USVString srcset;
 [CEReactions] attribute DOMString sizes;
 [CEReactions] attribute DOMString? crossOrigin;
 [CEReactions] attribute DOMString useMap;
 [CEReactions] attribute boolean isMap;
 [CEReactions] attribute unsigned long width;
 [CEReactions] attribute unsigned long height;
 readonly attribute unsigned long naturalWidth;
 readonly attribute unsigned long naturalHeight;
 readonly attribute boolean complete;
 readonly attribute USVString currentSrc;
 [CEReactions] attribute DOMString referrerPolicy;
 [CEReactions] attribute DOMString decoding;
 [CEReactions] attribute DOMString loading;
 [CEReactions] attribute DOMString fetchPriority;

 Promise<undefined> decode();

 // also has obsolete members
};

WebIDL, फ़ंक्शनल इंटरफ़ेस के बारे में बताने का एक स्टैंडर्ड तरीका है. जैसे, वे इंटरफ़ेस जो ज़्यादातर वेब स्टैंडर्ड बनाते हैं.

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

तीसरे पक्ष की लाइब्रेरी

Blink, तीसरे पक्ष की कई लाइब्रेरी का इस्तेमाल करता है. उदाहरण के लिए, इंटरैक्टिव 2D और 3D ग्राफ़िक रेंडर करने के लिए, WebGL का इस्तेमाल किया जाता है.

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

अगर आपको WebGL का इस्तेमाल करके फ़्रैक्टल रेंडरिंग का उदाहरण देखना है, तो Fractious ऐप्लिकेशन देखें. यह ऐप्लिकेशन WebGL का इस्तेमाल करता है.

क्रॉस-प्लैटफ़ॉर्म रेंडरिंग

आपके मन में यह सवाल आ सकता है कि क्या Chrome, सभी ऑपरेटिंग सिस्टम और डिवाइसों पर Blink का इस्तेमाल करता है?

iOS और iPadOS पर, Chrome, रेंडरिंग इंजन के तौर पर WebKit का इस्तेमाल करता है. WebKit, असल में KDE नाम के एक दूसरे प्रोजेक्ट का फ़ोर्क था. यह प्रोजेक्ट 1998 में शुरू हुआ था. दरअसल, Safari और Chromium, दोनों को शुरुआत में WebKit पर बनाया गया था. Apple के App Store की ज़रूरी शर्तों के मुताबिक, आज Safari और Apple के ईकोसिस्टम में मौजूद सभी ब्राउज़र, WebKit का इस्तेमाल करते हैं.

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

इसके अलावा, Chromium को ऐसी सुविधाओं का इस्तेमाल करना था जिन्हें WebKit में नहीं बनाया जा रहा था. इसलिए, Chromium के इंजीनियरों ने वर्शन 28 से, अपने रेंडरिंग इंजन पर काम शुरू करने का फ़ैसला किया. उन्होंने WebKit से अपने कोड को फ़ोर्क किया और इसे Blink नाम दिया. ऐसा कहा जाता है कि Blink का नाम, Netscape Navigator ब्राउज़र में उपलब्ध <blink> टैग के नाम पर रखा गया था. इस टैग का इस्तेमाल, टेक्स्ट को चालू और बंद करने के लिए किया जाता था.

संक्षेप में: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave, और क्रोमियम पर आधारित अन्य ब्राउज़र और फ़्रेमवर्क, Blink का इस्तेमाल करते हैं. Safari और कुछ अन्य ब्राउज़र, WebKit का इस्तेमाल करते हैं. साथ ही, iOS और iPadOS पर मौजूद सभी ब्राउज़र भी WebKit का इस्तेमाल करते हैं. इनमें Chrome भी शामिल है. Firefox, Gecko नाम के रेंडरिंग इंजन का इस्तेमाल करता है.