আমরা প্রতিনিয়তই বিভিন্ন ওয়েব সাইট ব্যবহার করে থাকি। ওয়েব সাইটএ ভিসিট করতে হলে আমাদের কে অবশ্যই একটি ব্রাউজার ব্যবহার করতে হবে। তাই বর্তমানে ব্রাউজার একটি অত্যান্ত প্রয়োজনীয় একটি জিনিস। ব্রাউজার ছাড়া বাহিরের দুনিয়ার সাথে যোগাযোগ রাখা অনেকটা অসম্ভব। কিন্তু আমরা অনেকেই জানি না এই গুরুত্বপূর্ণ জিনিষটা কিভাবে কাজ করে? এখন অনেকের মনে প্রশ্ন আসতে পারে ব্রাউজার একটি সিম্পল সফটওয়্যার যেখানে যেকোনো একটা ওয়েব সাইটএর এড্রেস দিলে ব্রাউজার সেই ওয়েবসাইটটিকে আমাদের সামনে দেখায়। এইতো ব্রাউজার এর কাজ হয়তো আরো কিছু কাজ রয়েছে ব্যাকএ আসা সামনে যাওয়া পেজ রিফ্রেশ করা এবং কিছু হিস্ট্রি বা ইতিহাস মনে রাখা। আর তো কোনো কাজ নাই, যখন ওয়েবসাইটএর এড্রেস লিখে সার্চ করি তখন সব কাজ তো DNS Server এবং সার্চ করা ওয়েবসাইটটির সার্ভার করে থাকে। আপনারা যারা DNS server এবং ওয়েব কিভাবে কাজ করে সেই সম্পর্কে জানেননা তারা কষ্ট করে আমার আগে করা দুটো টিউন পরে আসুন। যাদের মনে এই ধরনের প্রশ্ন এসেছে তারা জেনে রাখুন ব্রাউজারের কাজ শুধু এইটুকু না, এর বাহিরে অনেক কাজ রয়েছে, যা সম্পর্কে আজকে আমরা আলোচনা করবো।

ব্রাউজার কিভাবে কাজ করে তা বিস্তারিতভাবে বলার আগে চলুন আপনাদেরকে একটু ব্রাউজারের কাজ সম্পর্কে ধারণা দিই। আপনার ব্রাউজারে গিয়ে যেকোনো একটি ওয়েবসাইটের এড্রেস লিখুন এবং এন্টার দিন। যেমন ধরুন আমি google.com লিখে সার্চ দিলাম। তারপর নিচের মতো একটি পেজ আসবে যেটি গুগলের সার্চ পেজ।

উপরে দেখতে পারতেছেন কত সুন্দর একটি পেজ আমাদের চলে এসেছে। এখন প্রশ্ন হচ্ছে এত সুন্দর একটি পেজ ব্রাউজার আমাদের দেখালো কিভাবে? আপনারা যারা আমার ওয়েব কিভাবে কাজ করে সেই টিউনটি পড়েছেন তারা জানেন কিভাবে কাজ করে। এডড্রেসটি সার্চ করার পরে সে প্রথমে ISP (Internet Service Provider) এর কাছে গেছে তারপর ISP তাকে DNS সার্ভারএর কাছে পাঠিয়ে দিয়েছে, DNS সার্ভার ওয়েবসাইটটির আইপি এড্রেসটা আবার ISP এর কাছে পাঠিয়ে দিয়েছে, তখন সব শেষে ওয়েবসাইটের সার্ভারটি এইরকম একটি পেজ দিয়ে দিয়েছে। এইটাই তো হয় তাই না? কিন্তু এখানে ছোট্ট একটি জিনিস ভুল রয়েছে, ভুলটি হলো ওয়েবসাইটটির সার্ভার কিন্তু আমাদেরকে কিন্তু এইরকম সুন্দর একটি পেজ দেয়না। ওয়েবসাইটটির সার্ভার ব্রাউজারকে নিচের মতো অনেক গুলো কোড দিয়ে থাকে।

উপরের কোড গুলো দেখে একজন সাধারণ মানুষের বুঝা সম্ভব না এখানে কি বুজাতে চাচ্ছে। এখানেই হচ্ছে ব্রাউজারের মূল কাজ। ব্রাউজার এই কোড গুলোকে নিয়ে সুন্দর ভাবে আমাদেরকে দেখায়।

এখানে ব্রাউজারকে অনেক গুলো ধাপ পার করে যেতে হয়। ধাপ গুলো নিয়ে বিস্তারিত নিচে আলোচনা করা হয়েছে।

ব্রাউজার কিভাবে কাজ করে তার বিস্তারিত আলোচনা।

ব্রাউজার এর কাজ কি এই সম্পর্কে কিছুটা হলেও ধারণা পেয়েছেন। ব্রাউজারের কাজ হচ্ছে সার্ভার থেকে আসা কোড গুলো কে সুন্দর ভাবে আমাদেরকে দেখানো। এই কাজ টা করার জন্য ব্রাউজারকে অনেক গুলো ধাপ অতিক্রম করতে হয়। সেই ধাপ গুলো হচ্ছে :

ধাপ ০১: User Interface

User Interface হচ্ছে সেই অংশ যার মাদ্ধমে আমরা ওয়েবসাইটের পেজ গুলো কে দেখতে পারি। এই অংশটি আমাদেরকে ওয়েবসাইটটিকে দেখতে সাহায্য করে। যেমন গুগলের পেজটা আমরা দেখতে পারতেছি। ব্রাউজারের কাজ করার সব গুলো অংশ থেকে শুধু আমরা সাধারণ মানুষ এই অংশটাই ব্রাউজারে দেখতে পাই।

ধাপ ০২ : Browser Engine

Browser Engine এমন একটা সেকশন বা অংশ যেখানে সার্ভার থেকে আসা ডাটা বা কোড গুলো কে ডোমে DOM রূপান্তর করে। DOM এর পূর্ণরূপ হচ্ছে Document Object Model। Dom নিয়ে বলতে গেলে ব্রাউজার dom ছাড়া কোনো কিছু বুঝতে পারেনা। সার্ভার থেকে যে ডাটা গুলো ব্রাউজারের কাছে আসে সেগুলো ব্রাউজার বুঝতে পারে না। ব্রাউজার সঠিক ভাবে বুঝতে পারার জন্য নিজের ভাষায় রূপান্তর করে নেয়। আর ব্রাউজার এর নিজের ভাষা বলতে গেলে টা হচ্ছে মূলত dom। যারা আপনারা জাভাস্ক্রিপ্ট নিয়ে কাজ করেন তারা জানেন আমরা যখন কোনো html কোড লিখে টা ব্রাউজারে রান করি তখন ব্রাউজার সেই কোড কে dom এ কনভার্ট করে নেয়।

ধাপ ০৩ : Render Engine

Render Engine ই হচ্ছে মূলত ব্রাউজারের কাজ। এখানে ব্রাউজার অনেক কঠিন কাজ করে থাকে। Render Engine কে সব সময় সচল থাকতে হয়। যখনই ডোমে কোনো কিছু পরিবর্তন হয় তখনি Render Engine কে আবার রিরেন্ডার নিতে হয়। render Engine আবার অনেক গুলো কম্পোনেন্টকে ধরে রাখে। Component বলতে render Engine এর কিছু ছোট ছোট অংশ কে বুঝায়। যেগুলোর আবার আলাদা আলাদা কাজ রয়েছে। Component গুলো হলো:

1. Networking : সার্ভারএর সাথে আমরা কিভাবে যোগাযোগ করবো তার সমস্ত কাজ করে থাকে এই networking। যখন আমরা সার্ভারে কোনো রিকোয়েস্ট পাঠাই সেটা হোক Get রিকোয়েস্ট বা post রিকোয়েস্ট সব ধরনের রিকোয়েস্ট হ্যান্ডেল করে থাকে networking অংশটা। এখন আপনাদের মাথায় একটা জিনিস আশাকরি সেটা কে get Request বলে। Get Request করলে সার্ভার আমাদেরকে কিছু ডাটা দেয়। আর Post Request যখন করবো তখন আমরা সার্ভার কে কিছু ডাটা দিবো। যেমন আমরা সবাইতো ফেসবুকে টিউন করি, তখন আমরা টিউন করার সময় ফেসবুকের সার্ভার কিছু ডাটা দিয়ে থাকি, এটা বলা হয় post Request। এই ধরনের রিকোয়েস্ট গুলো Networking ম্যানেজ করে থাকে।
2. JS Interpreter : JS এর পূর্ণরূপ হচ্ছে JavaScript (জাভাস্ক্রিপ্ট)। জাভাস্ক্রিপ্ট একটা মাত্র ল্যাঙ্গুয়েজ যা কিনা ব্রাউজার বুঝে। ব্রাউজারে কোনো ডাটা আউটপুট আসার পরে আমরা যদি কোনো কিছু চেঞ্জ বা পরিবর্তন করতে চাই, অর্থাৎ আমরা Browser Engine এ যে Dom টা পেয়েছি সেটা আপডেট ডিলিট বা কোনো ডাটা হাইড করতে চাই এই সব কাজ করতে হয় জাভাস্ক্রিপ্ট এর মাদ্ধমে। আমরা যে জাভাস্ক্রিপ্ট এর মাদ্ধমে ডাটা গুলো কে পরিবর্তন করবো তার জন্য ব্রাউজারে জাভাস্ক্রিপ্টের একটা অংশ থাকতে হবে। আর সেই অংশটাই হচ্ছে JS Interpreter।
3. UI Backend : আমরা যখন কোনো ওয়েবসাইট এ ভিসিট করি তখন সেখানে বিভিন্ন ধরনের এলিমেন্ট দেখতে পাই। যেমন বাটন টেক্সট ইমেজ ইত্যাদি। এই এলিমেন্ট গুলো কে আমরা html (hyper text markup language) এর মাদ্ধমে তৈরী করে থাকি। যখন এই html কোড গুলো ব্রাউজারে আসে তখন ব্রাউজার কোড গুলো কে অরিজিনাল Ui তে কনভার্ট করে থাকে। ব্রাউজারের সেই অংশটার নাম হচ্ছে Ui Backend।

Data Persistence:

আপনারা উপরের ছবিটা লক্ষ্য করলে দেখতে পাবেন সেখানে Data Persistence নামে একটি সেকশন রয়েছে। আমরা যখন ফেসবুকে একবার লগইন করি পরবর্তীতে প্রবেশ করার জন্য আমাদেরকে কোনো প্রকার পাসওয়ার্ড দিতে হয়না। এর কারণ হচ্ছে আগে একবার এই ব্রাউজার দিয়ে ফেসবুকে লগইন করেছি সেজন্য। এখন প্রশ্ন হচ্ছে ব্রাউজার মনে রাখে কিভাবে আমরা যে আগে ফেসবুকে লগইন করছি? এটা মনে রাখে ব্রাউজারের Data Persistence অংশটি। ফেসবুকে লগইন করার পরে ফেইসবুক ব্রউজারকে একটি cookie দিয়ে থাকে, যার মাঝে আমাদের বিভিন্ন ধরনের ডাটা থাকে। যে ডাটা গুলো কে ভেরিফাই করার মাদ্ধমে ব্রাউসার বুঝতে পারে আমরা আগে ফেসবুকে লগইন করেছি কিনা। এই ধরনের cookie গুলো Data Persistence এ সেভ বা জমা থাকে।

আমরা ইতিমধ্যে ব্রাউজার সম্পর্কে অনেক কিছু জেনে ফেলেছি। আবার আসুন Render Engine সম্পর্কে আরেকটু ভালোভাবে জেনে নেওয়া যাক।

Render Engine

Render Engine নিয়ে আগেও আলোচনা করেছি। তার বিভিন্ন কম্পোনেন্ট নিয়ে আলোচনা করেছি। এবার আরেকটু বিস্তারিতভাবে জানবো, কারণ আমি আগেও বলেছি Render Engine ব্রাউজারের অনেক গুরুত্বপূর্ণ একটা অংশ। Render Engine ই একটা html এবং css কে জীবন দিয়ে থাকে। Render Engine এর কাজ করার একটা নির্দিষ্ট ফ্লো আছে। যে ফ্লো অনুযায়ী Render Engine কাজ করে থাকে।

• Gather Resources : Render Engine প্রথমে Resources Gather করে থাকে। আমার কি কি ইমেজ রয়েছে, কি কি html ফাইল css ফাইল রয়েছে সব গুলো ফাইলকে একত্র বা সংগ্রহ করে থাকে।
• Parse HTML and Create DOM : যে HTML ফাইল গুলো কে সংগ্রহ করেছে সেগুলোকে ভেঙে DOM এ রূপান্তর করবে। আমাদের HTML ফাইলএ যত গুলো এলিমেন্ট রয়েছে সব গুলো DOM এ থাকবে।
• Render Tree : Render Tree বিষয়টা আবার কি? Render Engine যখন HTML কোড গুলো কে ডোমএ রূপান্তর করে তখন সে একটি dom tree জেনারেট বা তৈরী করে। সেখানে সব গুলো এলিমেন্ট থাকে। কোনো এলিমেন্ট যদি হিডেন থাকে সেই এলিমেন্ট গুলোও dom tree তে থাকে। কিন্তু যখন সেটি Render Tree তে আসে তখন শুধু যেই এলিমেন্ট গুলো শো হবে সেগুলোই Render Tree তে থাকে।
• Layout : Layout শব্দটা শুনেই বুঝতে পারতেছেন এটির কাজ কি। Layout এর কাজ হচ্ছে কোথায় কোন এলিমেন্ট বসবে টা সঠিক ভাবে বসানো। কোথায় একটা ইমেজ বসবে, ইমেজের সাইজ কত হবে সব কিছু Layout করে থাকে।
• Paint : Layout অংশে আমরা সব কিছুর জন্য জায়গা তৈরী করে থাকি। আর Paint অংশে আসে টা সঠিক ভাবে ব্রাউজারে পেইন্ট হয়। এবং সব শেষে আমরা সেই ওয়েবসাইট টা ব্রাউজারে দেখতে পাই।

এভাবেই Render Engine মূলত কাজ করে থাকে।

আশাকরি আপনার সবাই বুঝতে পেরেছেন কিভাবে ব্রাউজার কাজ করে থাকে। আসলে ব্রাউজার আরো অনেক কাজ করে থাকে, যেগুলো লিখে বুঝানো সম্ভব না। যখন আপনি কোনো ওয়েবসাইট ডেভেলপ করবেন তখন সেই বিষয় গুলো বুঝতে পারবেন। আজকের জন্য এই পর্যন্ত আল্লাহ হাফেজ।