আধুনিক ওয়েব ব্রাউজারের ভিতরে দেখুন (পার্ট 1)

Mariko Kosaka

CPU, GPU, মেমরি, এবং মাল্টি-প্রসেস আর্কিটেকচার

এই 4-অংশের ব্লগ সিরিজে, আমরা উচ্চ-স্তরের আর্কিটেকচার থেকে রেন্ডারিং পাইপলাইনের সুনির্দিষ্ট বৈশিষ্ট্যগুলি পর্যন্ত Chrome ব্রাউজারের ভিতরে দেখব। আপনি যদি কখনও ভেবে থাকেন যে ব্রাউজারটি কীভাবে আপনার কোডকে একটি কার্যকরী ওয়েবসাইটে পরিণত করে, বা আপনি নিশ্চিত না কেন পারফরম্যান্সের উন্নতির জন্য একটি নির্দিষ্ট কৌশল প্রস্তাবিত হয়, তাহলে এই সিরিজটি আপনার জন্য।

এই সিরিজের অংশ 1 হিসাবে, আমরা কোর কম্পিউটিং পরিভাষা এবং Chrome এর মাল্টি-প্রসেস আর্কিটেকচারের দিকে নজর দেব।

কম্পিউটারের মূল অংশে রয়েছে CPU এবং GPU

ব্রাউজারটি যে পরিবেশে চলছে তা বোঝার জন্য আমাদের কম্পিউটারের কয়েকটি অংশ এবং তারা কী করে তা বুঝতে হবে।

সিপিইউ

সিপিইউ
চিত্র 1: 4 সিপিইউ কোর অফিস কর্মী হিসাবে প্রতিটি ডেস্কে বসে কাজ পরিচালনা করছে যখন তারা আসে

প্রথমে C entral P রোসেসিং U nit - বা CPU । সিপিইউকে আপনার কম্পিউটারের মস্তিষ্ক হিসেবে বিবেচনা করা যেতে পারে। একটি CPU কোর, এখানে একজন অফিস কর্মী হিসাবে চিত্রিত করা হয়েছে, তারা আসার সাথে সাথে একে একে অনেকগুলি বিভিন্ন কাজ পরিচালনা করতে পারে৷ এটি গণিত থেকে শিল্প পর্যন্ত সবকিছু পরিচালনা করতে পারে যখন গ্রাহকের কলের উত্তর দিতে হয় তা জানার সময়৷ অতীতে বেশিরভাগ সিপিইউ একটি একক চিপ ছিল। একটি কোর একই চিপে বসবাসকারী অন্য CPU-এর মতো। আধুনিক হার্ডওয়্যারে, আপনি প্রায়শই একাধিক কোর পান, আপনার ফোন এবং ল্যাপটপগুলিতে আরও কম্পিউটিং শক্তি দেয়।

জিপিইউ

জিপিইউ
চিত্র 2: রেঞ্চ সহ অনেক GPU কোর পরামর্শ দেয় যে তারা একটি সীমিত কাজ পরিচালনা করে

G raphics P rocessing U nit - বা GPU কম্পিউটারের আরেকটি অংশ। CPU এর বিপরীতে, GPU সাধারণ কাজগুলি পরিচালনা করতে ভাল কিন্তু একই সময়ে একাধিক কোর জুড়ে। নাম অনুসারে, এটি প্রথমে গ্রাফিক্স পরিচালনা করার জন্য তৈরি করা হয়েছিল। এই কারণেই গ্রাফিক্সের প্রেক্ষাপটে "GPU ব্যবহার করে" বা "GPU-ব্যাকড" দ্রুত রেন্ডারিং এবং মসৃণ ইন্টারঅ্যাকশনের সাথে যুক্ত। সাম্প্রতিক বছরগুলিতে, GPU-এক্সিলারেটেড কম্পিউটিং-এর মাধ্যমে, GPU-তে আরও বেশি সংখ্যক গণনা সম্ভব হচ্ছে।

আপনি যখন আপনার কম্পিউটার বা ফোনে একটি অ্যাপ্লিকেশন শুরু করেন, তখন CPU এবং GPUই অ্যাপ্লিকেশনটিকে শক্তিশালী করে। সাধারণত, অপারেটিং সিস্টেম দ্বারা প্রদত্ত প্রক্রিয়া ব্যবহার করে অ্যাপ্লিকেশনগুলি CPU এবং GPU-তে চলে।

হার্ডওয়্যার, ওএস, অ্যাপ্লিকেশন
চিত্র 3: কম্পিউটার আর্কিটেকচারের তিনটি স্তর। নীচে মেশিন হার্ডওয়্যার, মাঝখানে অপারেটিং সিস্টেম এবং উপরে অ্যাপ্লিকেশন।

প্রসেস এবং থ্রেডের উপর প্রোগ্রাম চালান

প্রক্রিয়া এবং থ্রেড
চিত্র 4: একটি বাউন্ডিং বাক্স হিসাবে প্রক্রিয়া, একটি প্রক্রিয়ার ভিতরে বিমূর্ত মাছ সাঁতার হিসাবে থ্রেড

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

আপনি যখন একটি অ্যাপ্লিকেশন শুরু করেন, একটি প্রক্রিয়া তৈরি হয়। প্রোগ্রামটি কাজ করতে সাহায্য করার জন্য থ্রেড(গুলি) তৈরি করতে পারে, তবে এটি ঐচ্ছিক। অপারেটিং সিস্টেম প্রক্রিয়াটিকে কাজ করার জন্য মেমরির একটি "স্ল্যাব" দেয় এবং সমস্ত অ্যাপ্লিকেশনের অবস্থা সেই ব্যক্তিগত মেমরির জায়গায় রাখা হয়। আপনি যখন অ্যাপ্লিকেশন বন্ধ করেন, প্রক্রিয়াটিও চলে যায় এবং অপারেটিং সিস্টেম মেমরি মুক্ত করে।

প্রক্রিয়া এবং মেমরি
চিত্র 5: মেমরি স্পেস ব্যবহার করে একটি প্রক্রিয়ার ডায়াগ্রাম এবং অ্যাপ্লিকেশন ডেটা সংরক্ষণ করা

একটি প্রক্রিয়া বিভিন্ন কাজ চালানোর জন্য অপারেটিং সিস্টেমকে অন্য প্রক্রিয়া শুরু করতে বলতে পারে। যখন এটি ঘটে, মেমরির বিভিন্ন অংশ নতুন প্রক্রিয়ার জন্য বরাদ্দ করা হয়। যদি দুটি প্রক্রিয়ার মধ্যে কথা বলার প্রয়োজন হয়, তারা I nter P rocess C যোগাযোগ ( IPC ) ব্যবহার করে তা করতে পারে। অনেক অ্যাপ্লিকেশান এইভাবে কাজ করার জন্য ডিজাইন করা হয়েছে যাতে কোনও কর্মী প্রক্রিয়া যদি প্রতিক্রিয়াহীন হয়ে যায়, তবে অ্যাপ্লিকেশনটির বিভিন্ন অংশে চলমান অন্যান্য প্রক্রিয়াগুলি বন্ধ না করে এটি পুনরায় চালু করা যেতে পারে।

কর্মী প্রক্রিয়া এবং আইপিসি
চিত্র 6: IPC-তে যোগাযোগের পৃথক প্রক্রিয়ার চিত্র

ব্রাউজার আর্কিটেকচার

সুতরাং কিভাবে একটি ওয়েব ব্রাউজার প্রক্রিয়া এবং থ্রেড ব্যবহার করে নির্মিত হয়? ঠিক আছে, এটি অনেকগুলি বিভিন্ন থ্রেড সহ একটি প্রক্রিয়া বা আইপিসি-তে যোগাযোগকারী কয়েকটি থ্রেড সহ অনেকগুলি ভিন্ন প্রক্রিয়া হতে পারে।

ব্রাউজার আর্কিটেকচার
চিত্র 7: প্রক্রিয়া/থ্রেড ডায়াগ্রামে বিভিন্ন ব্রাউজার আর্কিটেকচার

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

এই ব্লগ সিরিজের জন্য, আমরা চিত্র 8 এ বর্ণিত Chrome এর সাম্প্রতিক আর্কিটেকচার ব্যবহার করছি।

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

ব্রাউজার আর্কিটেকচার
চিত্র 8: ক্রোমের মাল্টি-প্রসেস আর্কিটেকচারের ডায়াগ্রাম। প্রতিটি ট্যাবের জন্য একাধিক রেন্ডারার প্রক্রিয়া চলমান ক্রোমের প্রতিনিধিত্ব করতে রেন্ডারার প্রসেসের অধীনে একাধিক স্তর দেখানো হয়েছে।

কোন প্রক্রিয়া কি নিয়ন্ত্রণ করে?

নিম্নলিখিত সারণী প্রতিটি Chrome প্রক্রিয়া এবং এটি কী নিয়ন্ত্রণ করে তা বর্ণনা করে:

প্রক্রিয়া এবং এটি কি নিয়ন্ত্রণ করে
ব্রাউজার অ্যাড্রেস বার, বুকমার্ক, ব্যাক এবং ফরওয়ার্ড বোতাম সহ অ্যাপ্লিকেশনটির "ক্রোম" অংশ নিয়ন্ত্রণ করে।
এছাড়াও একটি ওয়েব ব্রাউজারের অদৃশ্য, সুবিধাপ্রাপ্ত অংশ যেমন নেটওয়ার্ক অনুরোধ এবং ফাইল অ্যাক্সেস পরিচালনা করে।
রেন্ডারার ট্যাবের ভিতরে যেকোন কিছু নিয়ন্ত্রণ করে যেখানে একটি ওয়েবসাইট প্রদর্শিত হয়।
প্লাগ লাগানো ওয়েবসাইট দ্বারা ব্যবহৃত যেকোনো প্লাগইন নিয়ন্ত্রণ করে, উদাহরণস্বরূপ, ফ্ল্যাশ।
জিপিইউ অন্যান্য প্রক্রিয়া থেকে বিচ্ছিন্নভাবে GPU কার্যগুলি পরিচালনা করে। এটিকে বিভিন্ন প্রক্রিয়ায় বিভক্ত করা হয়েছে কারণ GPU গুলি একাধিক অ্যাপের অনুরোধগুলি পরিচালনা করে এবং সেগুলিকে একই পৃষ্ঠে আঁকে৷
ক্রোম প্রক্রিয়া
চিত্র 9: ব্রাউজার UI এর বিভিন্ন অংশের দিকে নির্দেশ করে বিভিন্ন প্রক্রিয়া

এক্সটেনশন প্রক্রিয়া এবং ইউটিলিটি প্রক্রিয়ার মতো আরও অনেক প্রক্রিয়া রয়েছে। আপনি যদি দেখতে চান যে আপনার ক্রোমে কতগুলি প্রক্রিয়া চলছে, উপরের ডানদিকের কোণায় বিকল্প মেনু আইকনে ক্লিক করুন, আরও সরঞ্জাম নির্বাচন করুন, তারপরে টাস্ক ম্যানেজার নির্বাচন করুন। এটি বর্তমানে চলমান প্রক্রিয়াগুলির একটি তালিকা সহ একটি উইন্ডো খুলবে এবং তারা কতটা CPU/মেমরি ব্যবহার করছে।

Chrome-এ মাল্টি-প্রসেস আর্কিটেকচারের সুবিধা

এর আগে, আমি উল্লেখ করেছি যে ক্রোম একাধিক রেন্ডারার প্রক্রিয়া ব্যবহার করে। সবচেয়ে সাধারণ ক্ষেত্রে, আপনি কল্পনা করতে পারেন প্রতিটি ট্যাবের নিজস্ব রেন্ডারার প্রক্রিয়া রয়েছে। ধরা যাক আপনার 3টি ট্যাব খোলা আছে এবং প্রতিটি ট্যাব একটি স্বাধীন রেন্ডারার প্রক্রিয়া দ্বারা চালিত হয়।

যদি একটি ট্যাব প্রতিক্রিয়াহীন হয়ে যায়, তাহলে আপনি প্রতিক্রিয়াহীন ট্যাবটি বন্ধ করতে পারেন এবং অন্যান্য ট্যাবগুলিকে জীবিত রেখে এগিয়ে যেতে পারেন। যদি সমস্ত ট্যাব একটি প্রক্রিয়ায় চলমান থাকে, যখন একটি ট্যাব প্রতিক্রিয়াহীন হয়ে যায়, তখন সমস্ত ট্যাব প্রতিক্রিয়াহীন হয়ে যায়। এটা দুঃখের.

ট্যাবের জন্য একাধিক রেন্ডারার
চিত্র 10: প্রতিটি ট্যাবে চলমান একাধিক প্রক্রিয়া দেখানো ডায়াগ্রাম

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

যেহেতু প্রসেসগুলির নিজস্ব ব্যক্তিগত মেমরি স্পেস থাকে, সেগুলিতে প্রায়শই সাধারণ পরিকাঠামোর অনুলিপি থাকে (যেমন V8 যা একটি Chrome এর জাভাস্ক্রিপ্ট ইঞ্জিন)। এর অর্থ হল আরও মেমরি ব্যবহার কারণ সেগুলি একই প্রক্রিয়ার মধ্যে থ্রেড হলে সেগুলি যেভাবে হবে সেভাবে ভাগ করা যায় না। মেমরি সংরক্ষণ করার জন্য, ক্রোম এটি কতগুলি প্রক্রিয়া ঘোরাতে পারে তার একটি সীমা রাখে। আপনার ডিভাইসে কত মেমরি এবং CPU শক্তি আছে তার উপর নির্ভর করে সীমা পরিবর্তিত হয়, কিন্তু যখন Chrome সীমা অতিক্রম করে, তখন এটি একই সাইট থেকে একটি প্রক্রিয়ায় একাধিক ট্যাব চালানো শুরু করে।

আরও মেমরি সংরক্ষণ করা হচ্ছে - ক্রোমে পরিষেবা প্রদান

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

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

ক্রোম সার্ভিফিকেশন
চিত্র 11: ক্রোমের পরিষেবার ডায়াগ্রাম বিভিন্ন পরিষেবাকে একাধিক প্রক্রিয়া এবং একটি একক ব্রাউজার প্রক্রিয়ায় স্থানান্তরিত করে

প্রতি-ফ্রেম রেন্ডারার প্রসেস - সাইট আইসোলেশন

সাইট আইসোলেশন হল Chrome-এ সম্প্রতি চালু করা একটি বৈশিষ্ট্য যা প্রতিটি ক্রস-সাইট আইফ্রেমের জন্য একটি পৃথক রেন্ডারার প্রক্রিয়া চালায়। আমরা প্রতি ট্যাব মডেলের একটি রেন্ডারার প্রক্রিয়া সম্পর্কে কথা বলছি যা ক্রস-সাইট আইফ্রেমগুলিকে বিভিন্ন সাইটের মধ্যে মেমরির স্থান ভাগ করে নেওয়ার সাথে একটি একক রেন্ডারার প্রক্রিয়াতে চালানোর অনুমতি দেয়। একই রেন্ডারার প্রক্রিয়ায় a.com এবং b.com চালানো ঠিক বলে মনে হতে পারে। একই মূল নীতি হল ওয়েবের মূল নিরাপত্তা মডেল; এটি নিশ্চিত করে যে একটি সাইট সম্মতি ছাড়া অন্য সাইট থেকে ডেটা অ্যাক্সেস করতে পারবে না। এই নীতিকে বাইপাস করা নিরাপত্তা আক্রমণের একটি প্রাথমিক লক্ষ্য। প্রসেস আইসোলেশন হল সাইট আলাদা করার সবচেয়ে কার্যকর উপায়। মেল্টডাউন এবং স্পেকটারের সাথে, এটি আরও স্পষ্ট হয়ে উঠেছে যে আমাদের প্রসেস ব্যবহার করে সাইটগুলিকে আলাদা করতে হবে। Chrome 67 থেকে ডিফল্টরূপে ডেস্কটপে সাইট আইসোলেশন সক্ষম করা হলে, একটি ট্যাবে প্রতিটি ক্রস-সাইট আইফ্রেম একটি পৃথক রেন্ডারার প্রক্রিয়া পায়৷

সাইট বিচ্ছিন্নতা
চিত্র 12: সাইট আইসোলেশনের চিত্র; একাধিক রেন্ডারার প্রসেস একটি সাইটের মধ্যে iframes নির্দেশ করে

সাইট আইসোলেশন সক্ষম করা একটি বহু বছরের প্রকৌশল প্রচেষ্টা। সাইট আইসোলেশন বিভিন্ন রেন্ডারার প্রসেস বরাদ্দ করার মতো সহজ নয়; এটি মৌলিকভাবে iframes একে অপরের সাথে কথা বলার উপায় পরিবর্তন করে। বিভিন্ন প্রসেসে চলমান iframes সহ একটি পৃষ্ঠায় devtools খোলার অর্থ হল devtools কে পর্দার পিছনে কাজ বাস্তবায়ন করতে হবে যাতে এটি নির্বিঘ্ন দেখা যায়। এমনকি একটি পৃষ্ঠায় একটি শব্দ খুঁজে পেতে একটি সাধারণ Ctrl+F চালানোর অর্থ হল বিভিন্ন রেন্ডারার প্রক্রিয়া জুড়ে অনুসন্ধান করা। ব্রাউজার ইঞ্জিনিয়াররা সাইট আইসোলেশনকে একটি বড় মাইলফলক হিসাবে প্রকাশ করার কারণটি দেখতে পাচ্ছেন!

শেষ করি

এই পোস্টে, আমরা ব্রাউজার আর্কিটেকচারের একটি উচ্চ-স্তরের দৃশ্য কভার করেছি এবং একটি মাল্টি-প্রসেস আর্কিটেকচারের সুবিধাগুলি কভার করেছি। আমরা Chrome-এ সার্ভিসিফিকেশন এবং সাইট আইসোলেশনকেও কভার করেছি যা মাল্টি-প্রসেস আর্কিটেকচারের সাথে গভীরভাবে সম্পর্কিত। পরবর্তী পোস্টে, আমরা একটি ওয়েবসাইট প্রদর্শন করার জন্য এই প্রক্রিয়াগুলি এবং থ্রেডগুলির মধ্যে কী ঘটবে তা নিয়ে আলোচনা শুরু করব।

আপনি পোস্ট উপভোগ করেছেন? ভবিষ্যতের পোস্টের জন্য যদি আপনার কোন প্রশ্ন বা পরামর্শ থাকে, আমি টুইটারে @kosamari- এ আপনার কাছ থেকে শুনতে চাই।

পরবর্তী: নেভিগেশন কি হয়