> For the complete documentation index, see [llms.txt](https://nipu.gitbook.io/coding-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nipu.gitbook.io/coding-js/browser-intro.md).

# ব্রাউজার পরিচিতি

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

## প্রোটোকল এবং স্ট্যান্ডার্ডস (Protocols and Standards):

ব্রাউজার সাধারণত সার্ভারের সাথে কমিনিউকেশন করার জন্য [http](https://en.wikipedia.org/wiki/HTTP) এবং [https](https://en.wikipedia.org/wiki/HTTPS) ইন্টারনেট [protoc](https://en.wikipedia.org/wiki/Internet_Protocol#:~:text=The%20Internet%20Protocol%20\(IP\)%20is,and%20essentially%20establishes%20the%20Internet.)[ols ](https://en.wikipedia.org/wiki/Internet_Protocol)অনুসরন করে .  এই protocal ইউজার কে ইমেজ ফাইল ও ওয়েব পেইজের বিভিন্ন কন্টেন্ট দেখাতে সাহায্য করে থাকে। 

## **ব্রাঊজারে কি কি থাকে (**What is in the browser?)

<figure><img src="/files/VNVRFsySHpAAOWiuiCUZ" alt=""><figcaption></figcaption></figure>

#### **১। Browser User Interface:**&#x20;

আমরা ব্রাউজার ওপেন করে যে ইন্টারফেস দেখতে পায় সেইটাই মূলত ইউজার ইন্টারফেস। ইউজারের সুবিধার কথা চিন্তা করে এখানে কিছু টুলস দেওয়া হয় যেমনঃ

* **অ্যাড্রেস বার:** আপনি যে ওয়েবসাইটটি দেখতে চান তার ঠিকানা (URL) টাইপ করার জায়গা।
* **ব্যাক বাটন:** আপনাকে আগের দেখা ওয়েব পেজে ফিরিয়ে নিয়ে যায়।
* **ফরওয়ার্ড বাটন:** আপনাকে পরবর্তী ওয়েব পেজে নিয়ে যায় (যদি আপনি ব্যাক বাটন ব্যবহার করে থাকেন)।
* **রিফ্রেশ বাটন:** বর্তমান ওয়েব পেজটি পুনরায় লোড করে।
* **হোম বাটন:** আপনাকে আপনার নির্ধারিত হোমপেজে নিয়ে যায়।
* **বুকমার্ক বাটন:** পছন্দের ওয়েব পেজগুলি সংরক্ষণ করার জন্য।
* **ট্যাব:** একই উইন্ডোতে একাধিক ওয়েব পেজ খোলা রাখার জন্য।
* **অ্যাড্রেস বার:** ওয়েবসাইটের ঠিকানা প্রদর্শন করে।
* **সার্চ বার:** ইন্টারনেটে তথ্য অনুসন্ধান করার জন্য।
* **স্ট্যাটাস বার:** ব্রাউজারের বর্তমান কার্যকলাপ সম্পর্কে তথ্য প্রদর্শন করে।
* **মেনু বার:** ব্রাউজারের সেটিংস এবং বৈশিষ্ট্যগুলি অ্যাক্সেস করার জন্য।
* **টুলবার:** সাধারণ কাজগুলির জন্য বোতামগুলির একটি সারি (যেমন নতুন ট্যাব খোলা, পৃষ্ঠা জুম করা, ইত্যাদি)।
* **সাইডবার:** বুকমার্ক, ডাউনলোড, ইতিহাস ইত্যাদির মতো অতিরিক্ত বৈশিষ্ট্যগুলি অ্যাক্সেস করার জন্য।

এরকম আরো অনেক সুবিধা যুক্ত থাকে।

#### **২। Browser Engine: -**

এইটা মূলত  একটি ব্রাউজারের একদম মুল উপদান। যা সব ব্রাউজারেই বিদ্যমান রয়েছে। এটি রেন্ডারিং ইঞ্জিন এবং ইউজার ইন্টারফেসের মাঝে অনেকটা ব্রিজ হিসেবে কাজ করে। প্রতিটা ব্রাউজারে Browser Engine স্বতন্ত্র হয়ে থাকে। ব্যবহারকারী এইখানে যেভাবে ইনপুট দিবে সেভাবে Browser Engine ব্রাউজারের Rendering Engine এর সাথে কমিউনিকেশন করে আউটপুট দিয়ে দিবে ইউজারকে।&#x20;

#### **Rendering Engine:**

ব্রাউজারের রেন্ডারিং ইঞ্জিন হলো সেই মূল অংশ, যা ওয়েব পেজের কোডকে ব্যবহারকারীর কাছে দৃশ্যমান আকারে রূপান্তরিত করে। সহজ ভাষায় বলা যায়, এটি একটি অনুবাদক(transpiler), যা HTML, CSS, এবং JavaScript-এর মতো কোড ভাষাগুলোকে  আমাদের নিকটদেখা যায় এমন লেআউট, ফন্ট, রঙ, ছবি, এবং ইন্টারেক্টিভ ইলিমেন্ট হিসেবে রূপান্তরিত করে।

<figure><img src="/files/n8ykyJvpRNrMD0DUrreb" alt=""><figcaption></figcaption></figure>

**কীভাবে কাজ করে?**

1. **কোড পাঠ এবং বিশ্লেষণ:** ব্রাউজার যখন কোনো ওয়েব পেজের কোড পায়, তখন রেন্ডারিং ইঞ্জিন সেই কোডকে পড়ে এবং তা বিশ্লেষণ করে।
2. **DOM ট্রি তৈরি:** কোড বিশ্লেষণের মাধ্যমে রেন্ডারিং ইঞ্জিন একটি DOM (Document Object Model) ট্রি তৈরি করে। এই ট্রি ওয়েব পেজের কাঠামোকে প্রতিনিধিত্ব করে, যেখানে প্রতিটি উপাদান (হেডিং, প্যারাগ্রাফ, ছবি) একটি করে নড হিসেবে থাকে।
3. **CSS স্টাইল প্রয়োগ:** DOM ট্রি তৈরি হওয়ার পর, রেন্ডারিং ইঞ্জিন CSS স্টাইলগুলোকে প্রয়োগ করে। এতে পেজের লেআউট, ফন্ট, রঙ, ইত্যাদি নির্ধারণ হয়।
4. **পেইন্টিং:** এরপর রেন্ডারিং ইঞ্জিন DOM ট্রি এবং CSS স্টাইলের ভিত্তিতে পেইন্টিং প্রক্রিয়া শুরু করে। এতে পেজের প্রতিটি উপাদানকে স্ক্রিনে আঁকা হয়।
5. **লেআউট তৈরি:** রেন্ডারিং ইঞ্জিন পেজের বিভিন্ন উপাদানকে নির্দিষ্ট স্থানে সাজিয়ে লেআউট তৈরি করে।
6. **ইন্টার‍্যাক্টিভিটি যোগ:** JavaScript-এর মাধ্যমে পেজের ইন্টার‍্যাক্টিভ বৈশিষ্ট্যগুলো যুক্ত করা হয়।

**কিছু জনপ্রিয় রেন্ডারিং ইঞ্জিন:**

* **Blink:** Google Chrome, Microsoft Edge, Opera, এবং অন্যান্য ব্রাউজার দ্বারা ব্যবহৃত।
* **Gecko:** Mozilla Firefox ব্রাউজার দ্বারা ব্যবহৃত।
* **WebKit:** Apple Safari ব্রাউজার দ্বারা ব্যবহৃত।

**রেন্ডারিং ইঞ্জিনের গুরুত্ব:**

* **দৃশ্যমানতা:** রেন্ডারিং ইঞ্জিন ওয়েব পেজকে দৃশ্যমান করে তোলে।
* **ব্যবহারকারীর অভিজ্ঞতা:** দ্রুত এবং সুন্দরভাবে রেন্ডার করা পেজ ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
* **ওয়েব মান:** রেন্ডারিং ইঞ্জিনগুলো ওয়েব মানগুলো (যেমন, HTML, CSS, JavaScript) সমর্থন করে, যা ওয়েব পেজগুলোকে বিভিন্ন ব্রাউজারে একইভাবে প্রদর্শিত হতে সাহায্য করে।

#### **Networking:**

একটি ব্রাউজারের নেটওয়ার্কিং অংশটি নেটওয়ার্ক যোগাযোগের বিভিন্ন দিক পরিচালনা করে। এটি একটি সার্ভার থেকে অন্য    সার্ভারেে নেটওয়ার্কিং বা যোগাযোগ করতে গুরুত্ব পূর্ন ভূমিকা পালন করে থাকে এবং রেসপন্স রিসিভ ও রিকুয়েস্ট সেন্ড করা করতে এর ভূমিকা অনন্য ।&#x20;

#### **JavaScript Interpreter:**

জাভাস্ক্রিপ্ট ইন্টারপ্রেটার ওয়েব পেইজ গুলোর জাভাস্ক্রিপ্ট কোড গুলো এক্সিকিউটকরে। জাভাস্ক্রিপ্ট হল একটি প্রোগ্রামিং ভাষা যা সাধারণত ওয়েবসাইটগুলিতে ইন্টারঅ্যাকটিভিটি এবং গতিশীল কার্যকারিতা যোগ করার জন্য ব্যবহৃত হয়। ইন্টারপ্রেটার নিশ্চিত করে যে জাভাস্ক্রিপ্ট কোড সঠিকভাবে এক্সিকিউট করা হয়েছে। এবং লিখা জাভাস্ক্রিপ্ট প্রোগ্রাম গুলো ব্যাবহারকারী এর ব্যাবহার উপর ভিত্তি করে সঠিক রেসপন্স দিচ্ছে।&#x20;

**UI Backend:**&#x20;

যদি ও আমরা সবসময় ব্রাউজারের ফ্রন্টেন্ড অংশটা দেখি কিন্তু এর পিছনে অনেক কিছু নীরবে হয়ে থাকে যা মূলত সম্পাদন করে থাকে ব্যাকেন্ড। ব্যাকেন্ড  এর মাধ্যমেই ব্রাউজার এবং ওয়েব সার্ভারের মধ্যে যোগাযোগ হয়ে থাকে, এছাড়া ওয়েভ পেইজ গুলো ব্রাউজ করা এবং সেগুলো ইউজারের নিকট সুন্দরভাবে দেখানে এই সব কাজই ব্যাকেন্ড দ্বারা হয় থাকে। ব্যাক-এন্ড HTML, CSS, এবং JavaScript ফাইলগুলিকে রিড করে, ওয়েব   পেইজ গুলোকেসঠিকভাবে রেন্ডার করা হয়েছে তা নিশ্চিত করে। এটি নেটওয়ার্ক সংযোগ কন্ট্রোল করে  তাছাড়া HTTP, HTTPS এবং WSS এর মতো বিভিন্ন প্রোটোকল সমর্থন করে এবং এনক্রিপশন এবং  ডিক্রিপ্টশন  মতো সিকিউরিটির  বিষয়গুলো ব্যবস্থা পরিচালনা করে।

**Data Storage/Persistence:**

ব্রাউজারের Data Storage/Persistence হল একটি গুরুত্বপূর্ণ অংশ যা ব্যবহারকারীর পছন্দ, কুকি, ক্যাশে এবং অন্যান্য ডেটা সংরক্ষণ করে। এটি ব্রাউজারের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে।

ব্রাউজারের **Data Storage/Persistence** বিভিন্ন ধরনের হতে পারে, যার মধ্যে রয়েছে:

* **Local Storage:** এটি ব্রাউজারের স্থানীয় মেমরিতে ডেটা সংরক্ষণ করে। Local Storage ব্রাউজারটি বন্ধ হওয়ার পরেও ডেটা সংরক্ষণ করে।
* **Session Storage:** এটি ব্রাউজারের সেশন মেমরিতে ডেটা সংরক্ষণ করে। এটি ব্রাউজারটি বন্ধ হওয়ার পরে ডেটা মুছে ফেলে।
* **Cookies:** এটি খুবই অল্প  পরিমাণে  ডেটা যা ওয়েবসাইট ব্যবহারকারীর ডিভাইসে সংরক্ষণ করে এবং সেইটা কিন্তু একটা নির্দিষ্ট সময় পর্যন্ত ব্রাউজারে বিদ্যমান থাকে।&#x20;
* **Cache:** এটি ওয়েবসাইটের বিভিন্ন  এলিমেন্ট গুলোকেসংরক্ষণ করে  যেমনঃ-   Image, css, Javscript code multimedia files ইত্যাদি যাতে ব্যবহারকারীরা পরবর্তীতে দ্রুত এটি অ্যাক্সেস করতে পারে।