ওয়েবের অন্যতম বিশেষ ক্ষমতা হলো এর সংযোজনযোগ্যতা। ওয়েব পেজগুলোতে বিভিন্ন ধরনের উপাদান অন্তর্ভুক্ত থাকে, যা সম্ভাব্য একাধিক উৎস থেকে আসতে পারে।
ক্রোম, অ্যান্ড্রয়েড ওয়েবভিউ, মাইক্রোসফট এজ, অপেরা এবং ব্রেভ সহ ক্রোমিয়াম -ভিত্তিক ব্রাউজারগুলির রেন্ডারিং ইঞ্জিন হিসেবে ব্লিংক কাজ করে।
রেন্ডারিং ইঞ্জিন হলো ওয়েব ব্রাউজারের সেই অংশ যা এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোডকে—ছবি ও অন্যান্য রিসোর্সের সাথে—এমন ওয়েব পেজে রূপান্তরিত করে যা আপনি দেখতে ও ব্যবহার করতে পারেন।
ব্লিংক কীভাবে একটি ওয়েব পেজ রেন্ডার করে?
ব্লিংক এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, ভিডিও এবং ছবির মতো সমস্ত প্রয়োজনীয় রিসোর্স সংগ্রহ করে রেন্ডারিং প্রক্রিয়া শুরু করে। এই রিসোর্সগুলো পুনরুদ্ধার করার জন্য, ব্লিংক নেটওয়ার্ক স্ট্যাক, ক্রোমিয়াম এবং অন্তর্নিহিত অপারেটিং সিস্টেমের সাথে যোগাযোগ পরিচালনা করে।
CSS এবং HTML লোড হওয়ার সাথে সাথেই, Blink সেই কোডটিকে, যা টেক্সট আকারে থাকে, এমন একটি উপস্থাপনায় রূপান্তর করতে পারে যা নিয়ে এটি কাজ করতে পারে। একে পার্সিং বলা হয়। জাভাস্ক্রিপ্টকেও প্রথমে পার্স করে তারপর এক্সিকিউট করতে হয়।
এই সব কাজ শেষ হয়ে গেলে, ব্লিঙ্ক রেন্ডারিং শুরু করে। রেন্ডারিং হলো সেইসব ওয়েব পেজের বিন্যাস ও প্রদর্শন করার কাজ, যা আপনি দেখেন এবং যার সাথে মিথস্ক্রিয়া করেন।
নিম্নলিখিত ডায়াগ্রামটি রেন্ডারিং টাস্কের পাইপলাইনের পর্যায়গুলো দেখায়, যার মধ্যে প্রতিটি পর্যায়ে জড়িত উপাদান, প্রক্রিয়া এবং রিসোর্স অন্তর্ভুক্ত রয়েছে। ব্লিংকের এখনও অনেক কাজ বাকি!
গ্রাফিক্স রেন্ডার করুন
কম্পিউটার বা মোবাইল ডিভাইসের অন্তর্নিহিত গ্রাফিক্স হার্ডওয়্যারের সাথে যোগাযোগ করার জন্য ব্লিংক ওপেন-সোর্স স্কিয়া গ্রাফিক্স ইঞ্জিন ব্যবহার করে।
স্কিয়া এমন কিছু সাধারণ এপিআই (API) প্রদান করে যা বিভিন্ন হার্ডওয়্যার ও সফটওয়্যার প্ল্যাটফর্মে কাজ করে। এটি গুগল ক্রোম এবং আরও অনেক পণ্যের গ্রাফিক্স ইঞ্জিন হিসেবে কাজ করে।
বিভিন্ন অপারেটিং সিস্টেম ও ডিভাইসকে সমর্থন করার চেষ্টা এবং প্ল্যাটফর্ম পরিবর্তনের সাথে তাল মিলিয়ে চলার পরিবর্তে, স্কিয়া OpenGL , Vulkan এবং DirectX-এর মতো গ্রাফিক্স লাইব্রেরি ব্যবহার করে। স্কিয়া কোন লাইব্রেরি ব্যবহার করবে তা নির্ভর করে এটি কোন প্ল্যাটফর্মে চলছে তার উপর, যেমন মোবাইলে অ্যান্ড্রয়েড বা ডেস্কটপে উইন্ডোজ।
জাভাস্ক্রিপ্ট পার্স এবং এক্সিকিউট করুন
জাভাস্ক্রিপ্ট এবং ওয়েবঅ্যাসেম্বলি কোড পার্স ও এক্সিকিউট করার জন্য ব্লিংক, ক্রোমিয়াম প্রজেক্ট দ্বারা তৈরি একটি ওপেন-সোর্স ইঞ্জিন V8 ব্যবহার করে।
V8 একজন ডেভেলপারকে জাভাস্ক্রিপ্ট বা ওয়েবঅ্যাসেম্বলি কোড ব্যবহার করে অন্তর্নিহিত ব্রাউজারের ক্ষমতাগুলো অ্যাক্সেস করার সুযোগ করে দেয়। উদাহরণস্বরূপ: ডকুমেন্ট অবজেক্ট মডেল (Document Object Model) ম্যানিপুলেট করা, যা হলো একটি ডকুমেন্টের অভ্যন্তরীণ উপস্থাপনা এবং ব্লিংক (Blink) এইচটিএমএল (HTML) কোড থেকে এটি তৈরি করে।
V8 , ECMAScript নামে পরিচিত জাভাস্ক্রিপ্ট স্ট্যান্ডার্ড অনুসারে জাভাস্ক্রিপ্ট প্রসেস করে।
মান অনুযায়ী রেন্ডার করুন
V8, ECMAScript নামে পরিচিত জাভাস্ক্রিপ্ট স্ট্যান্ডার্ড অনুসারে জাভাস্ক্রিপ্ট প্রসেস করে। Blink-এর মতো রেন্ডারিং ইঞ্জিনগুলো ওয়েব স্ট্যান্ডার্ডগুলোকে আন্তঃকার্যকরীভাবে বাস্তবায়ন করার জন্য ডিজাইন করা হয়েছে। ওয়েব স্ট্যান্ডার্ডগুলো ডেভেলপার এবং ব্যবহারকারীদের এই বিষয়ে নিশ্চিত করে যে, তারা যে ব্রাউজারই ব্যবহার করুক না কেন, ওয়েব পেজগুলো ভালোভাবে কাজ করবে।
ব্লিংক এইচটিএমএল (HTML) , সিএসএস (CSS) এবং ডোম (DOM) সহ ওয়েব স্ট্যান্ডার্ডে সংজ্ঞায়িত ব্রাউজার এবং ভাষার বৈশিষ্ট্যগুলির স্পেসিফিকেশন অনুসরণ করে।
এইচটিএমএল এবং ডম
এইচটিএমএল স্ট্যান্ডার্ড নির্ধারণ করে দেয় যে ব্রাউজার ইঞ্জিনিয়াররা কীভাবে এইচটিএমএল এলিমেন্টগুলো বাস্তবায়ন করবেন। প্রতিটি এইচটিএমএল এলিমেন্টের স্পেসিফিকেশনে একটি অংশ থাকে যা সেই এলিমেন্টের জন্য ডম (DOM) ইন্টারফেস সংজ্ঞায়িত করে। এটি বিশদভাবে বর্ণনা করে যে ব্রাউজার দ্বারা জাভাস্ক্রিপ্ট কীভাবে বাস্তবায়ন করা উচিত, যাতে বিভিন্ন ডিভাইস এবং প্ল্যাটফর্মে একটি মানসম্মত পদ্ধতিতে এলিমেন্টটির সাথে মিথস্ক্রিয়া করা যায়।
ইন্টারফেস স্পেসিফিকেশনটি WebIDL (ওয়েব ইন্টারফেস ডেফিনিশন ল্যাঙ্গুয়েজ)-এ লেখা হয়। নিম্নলিখিত WebIDL কোডটি HTML স্ট্যান্ডার্ডের 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 দিয়ে ইন্টারফেসটি সংজ্ঞায়িত হয়ে গেলে, ইঞ্জিনিয়াররা ইন্টারফেস কলে সাড়া দেওয়ার জন্য ইমপ্লিমেন্টেশন তৈরি করতে পারেন।
html_image_element.idl ।তৃতীয় পক্ষের লাইব্রেরি
ব্লিংক একাধিক থার্ড-পার্টি লাইব্রেরি ব্যবহার করে। উদাহরণস্বরূপ, ইন্টারেক্টিভ ২ডি এবং ৩ডি গ্রাফিক্স রেন্ডার করার জন্য WebGL ব্যবহৃত হয়।
WebGL-এর মতো লাইব্রেরিগুলো অত্যন্ত অপ্টিমাইজ করা এবং যত্নসহকারে পরীক্ষিত। এগুলোর মাধ্যমে ব্লিংক নতুন করে কিছু তৈরি করার প্রয়োজন ছাড়াই গুরুত্বপূর্ণ ফিচার ও কার্যকারিতা ব্যবহার করতে পারে। WebGL IDL সংজ্ঞায়িত করা থাকে এবং ব্লিংকের ইঞ্জিনিয়াররা সেই ওয়েব ইন্টারফেসটিকে ব্যাকএন্ডের কোড ও লাইব্রেরির সাথে সংযুক্ত করেন, যা বিভিন্ন এলিমেন্ট রেন্ডার করতে ব্যবহৃত হয়।
আপনি যদি WebGL-এর কার্যকারিতা দেখতে চান, তাহলে Fractious নামক ফ্র্যাক্টাল রেন্ডারিং অ্যাপটি দেখতে পারেন, যেটি WebGL ব্যবহার করে।
ক্রস-প্ল্যাটফর্ম রেন্ডারিং
আপনার মনে প্রশ্ন জাগতে পারে, ক্রোম কি সব অপারেটিং সিস্টেম এবং ডিভাইসে, সব জায়গায় ব্লিংক ব্যবহার করে?
iOS এবং iPadOS-এ, Chrome তার রেন্ডারিং ইঞ্জিন হিসেবে WebKit ব্যবহার করে। WebKit আসলে অন্য একটি প্রজেক্ট, KDE- এর একটি ফর্ক ছিল, যার যাত্রা শুরু হয়েছিল সেই ১৯৯৮ সালে। প্রকৃতপক্ষে, Safari এবং Chromium উভয়ই প্রাথমিকভাবে WebKit-এর উপর ভিত্তি করে তৈরি হয়েছিল। বর্তমানে, Apple-এর অ্যাপ স্টোরের নিয়ম অনুযায়ী, Safari এবং Apple ইকোসিস্টেমের সমস্ত ব্রাউজার WebKit ব্যবহার করে।
সময়ের সাথে সাথে, ক্রোমিয়াম প্রকল্পগুলো একটি ভিন্ন মাল্টি-প্রসেস সফটওয়্যার আর্কিটেকচার গড়ে তোলে, কারণ একটি কোডবেসে দুটি পৃথক আর্কিটেকচার বজায় রাখা সমস্যাজনক হয়ে উঠছিল।
এছাড়াও, ক্রোমিয়াম এমন কিছু ফিচার ব্যবহার করতে চেয়েছিল যা ওয়েবকিটে অন্তর্ভুক্ত ছিল না। তাই, ২৮ নম্বর সংস্করণ থেকে, ক্রোমিয়ামের প্রকৌশলীরা তাদের নিজস্ব রেন্ডারিং ইঞ্জিন তৈরির কাজ শুরু করার সিদ্ধান্ত নেন। তারা ওয়েবকিট থেকে তাদের কোড ফোর্ক করে এবং এর নাম দেয় ব্লিংক। শোনা যায় যে, নেটস্কেপ নেভিগেটর ব্রাউজারে টেক্সটকে অন-অফ করে ঝিকমিক করানোর জন্য ব্যবহৃত (খুব একটা জনপ্রিয় নয় এমন) <blink> ট্যাগটির নামানুসারে ব্লিংকের নামকরণ করা হয়েছিল।
সংক্ষেপে বলতে গেলে: ক্রোম, মাইক্রোসফট এজ, অপেরা, ভিভাল্ডি, আর্ক, ব্রেভ এবং অন্যান্য ক্রোমিয়াম-ভিত্তিক ব্রাউজার ও ফ্রেমওয়ার্কগুলো ব্লিংক ব্যবহার করে। সাফারি এবং আরও কিছু ব্রাউজার ওয়েবকিট ব্যবহার করে, সেইসাথে ক্রোম সহ আইওএস এবং আইপ্যাডওএস-এর সমস্ত ব্রাউজারও এটি ব্যবহার করে। ফায়ারফক্স গেকো নামক একটি রেন্ডারিং ইঞ্জিন ব্যবহার করে।