Blink क्या है?

Sam Dutton

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

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

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

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

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

सीएसएस और एचटीएमएल लोड होने के बाद, 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 को ECMAScript के नाम से जाने जाने वाले JavaScript स्टैंडर्ड के मुताबिक प्रोसेस करता है.

स्टैंडर्ड के हिसाब से रेंडर करना

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

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

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

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

इंटरफ़ेस की जानकारी, WebIDL: वेब इंटरफ़ेस डेफ़िनिशन लैंग्वेज में लिखी गई है. नीचे दिया गया WebIDL, HTMLImageElement के लिए HTML स्टैंडर्ड की परिभाषा का हिस्सा है.

[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 की मदद से इंटरफ़ेस तय करने के बाद, इंजीनियर ऐसे लागू करने का तरीका बना सकते हैं जो इंटरफ़ेस कॉल का जवाब देते हैं.

Chromium सोर्स में

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

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

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

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

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

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

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

समय के साथ, 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 नाम के रेंडरिंग इंजन का इस्तेमाल करता है.

अगले चरण

Blink इंटेंट क्या हैं? लेख पढ़ें.