ওয়েব কর্মীদের একটি ওভারভিউ

এই কোর্সের বেশিরভাগ বিষয়বস্তু এখন পর্যন্ত সাধারণ এইচটিএমএল কর্মক্ষমতা বিবেচনা, সংস্থান ইঙ্গিত, প্রাথমিক পৃষ্ঠা লোডের সময় এবং ব্যবহারকারীর ইনপুটের প্রতিক্রিয়াশীলতা উন্নত করার জন্য বিভিন্ন সংস্থান প্রকারের অপ্টিমাইজেশন, সেইসাথে অলস লোডিং নির্দিষ্ট সংস্থানগুলির মতো ধারণাগুলির উপর দৃষ্টি নিবদ্ধ করেছে৷

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

জাভাস্ক্রিপ্ট প্রায়ই একটি একক-থ্রেডেড ভাষা হিসাবে বর্ণনা করা হয়। অনুশীলনে, এটি প্রধান থ্রেডকে বোঝায়, যা একটি একক থ্রেড যেখানে ব্রাউজার বেশিরভাগ কাজ করে যা আপনি ব্রাউজারে দেখেন। এই কাজের মধ্যে স্ক্রিপ্টিং, কিছু ধরণের রেন্ডারিং কাজ, HTML এবং CSS পার্সিং এবং অন্যান্য ধরণের ব্যবহারকারী-মুখী কাজ যা ব্যবহারকারীর অভিজ্ঞতাকে চালিত করে সেগুলির সাথে জড়িত কাজগুলি অন্তর্ভুক্ত করে৷ প্রকৃতপক্ষে, ব্রাউজারগুলি অন্য থ্রেডগুলি ব্যবহার করে এমন কাজ করতে যা আপনি, বিকাশকারী, সাধারণত সরাসরি অ্যাক্সেস পান না—যেমন GPU থ্রেড ৷

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

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

এই মডিউল এবং একটি কংক্রিট ব্যবহারের ক্ষেত্রে দেখানো পরবর্তী ডেমো ওয়েব কর্মীদের কভার করে। ডেমো নিজেই দেখায় যে আপনি মূল থ্রেডের বাইরে একটি JPEG ফাইল থেকে ইমেজ মেটাডেটা পড়ার কাজ সম্পাদন করতে কীভাবে একজন ওয়েব কর্মীকে ব্যবহার করতে পারেন—এবং ব্যবহারকারীর দেখার জন্য আপনি কীভাবে সেই মেটাডেটাটি মূল থ্রেডে ফিরিয়ে আনতে পারেন।

কিভাবে একটি ওয়েব কর্মী চালু করা হয়

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

const myWebWorker = new Worker('/js/my-web-worker.js');

কর্মীর জাভাস্ক্রিপ্ট ফাইল-এ my-web-worker.js এ আপনি কোড লিখতে পারেন যা তারপর একটি পৃথক কর্মী থ্রেডে চলে।

ওয়েব কর্মীর সীমাবদ্ধতা

জাভাস্ক্রিপ্টের বিপরীতে যা মূল থ্রেডে চলে, ওয়েব কর্মীদের window প্রেক্ষাপটে সরাসরি অ্যাক্সেস নেই। এবং এটি প্রদান করে এপিআইগুলিতে সীমিত অ্যাক্সেস রয়েছে। ওয়েব কর্মীরা নিম্নলিখিত সীমাবদ্ধতার সাপেক্ষে:

  • ওয়েব কর্মীরা সরাসরি DOM অ্যাক্সেস করতে পারে না।
  • ওয়েব কর্মীরা একটি মেসেজিং পাইপলাইনের মাধ্যমে window প্রেক্ষাপটের সাথে যোগাযোগ করতে পারে , যার অর্থ হল একজন ওয়েব কর্মী পরোক্ষভাবে DOM-এ অ্যাক্সেস করতে পারে।
  • ওয়েব ওয়ার্কার স্কোপ window পরিবর্তে self ।
  • ওয়েব ওয়ার্কার স্কোপের জাভাস্ক্রিপ্টের আদিম এবং গঠন, সেইসাথে এপিআই যেমন fetch এবং মোটামুটি বড় সংখ্যক অন্যান্য API-তে অ্যাক্সেস রয়েছে ।

কিভাবে ওয়েব কর্মীরা window কথা বলেন

একজন ওয়েব কর্মীর পক্ষে মেসেজিং পাইপলাইনের মাধ্যমে মূল থ্রেডের window প্রেক্ষাপটের সাথে যোগাযোগ করা সম্ভব। এই পাইপলাইনটি আপনাকে প্রধান থ্রেড এবং ওয়েব ওয়ার্কার থেকে ডেটা ফেরি করতে দেয়। একটি ওয়েব কর্মী থেকে মূল থ্রেডে ডেটা পাঠাতে, আপনি ওয়েব কর্মীর প্রসঙ্গে একটি message ইভেন্ট সেট আপ করেন ( self )

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

তারপরে মূল থ্রেডের window প্রসঙ্গে একটি স্ক্রিপ্টে, আপনি অন্য একটি message ইভেন্ট ব্যবহার করে ওয়েব ওয়ার্কার থ্রেড থেকে বার্তাটি পেতে পারেন:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

ওয়েব ওয়ার্কার এর মেসেজিং পাইপলাইন হল ওয়েব ওয়ার্কার কনটেক্সট থেকে এক প্রকার এস্কেপ হ্যাচ। এটি ব্যবহার করে, আপনি ওয়েব ওয়ার্কার থেকে window ডেটা পাঠাতে পারেন যা আপনি DOM আপডেট করতে ব্যবহার করতে পারেন, বা মূল থ্রেডে করা আবশ্যক অন্যান্য কাজ সম্পাদন করতে পারেন।

আপনার জ্ঞান পরীক্ষা করুন

একজন ওয়েব কর্মী কোন থ্রেডে চলে?

মূল থ্রেড।
আবার চেষ্টা করুন
এর নিজস্ব থ্রেড ( ওয়েব ওয়ার্কার থ্রেড নামেও পরিচিত)।
সঠিক!
GPU থ্রেড।
আবার চেষ্টা করুন

একজন ওয়েব কর্মী কি অ্যাক্সেস করতে পারেন?

জাভাস্ক্রিপ্ট আদিম, যেমন অ্যারে এবং অবজেক্ট।
সঠিক!
fetch সহ window প্রসঙ্গে উপলব্ধ API-এর একটি কঠোর উপসেট।
সঠিক!
window প্রসঙ্গ, কিন্তু শুধুমাত্র পরোক্ষভাবে.
সঠিক!

কিভাবে একজন ওয়েব কর্মী `উইন্ডো` প্রসঙ্গ অ্যাক্সেস করতে পারেন?

সরাসরি, window অবজেক্টের সদস্যদের উল্লেখ করে।
আবার চেষ্টা করুন
একজন ওয়েব কর্মী কোন উপায়ে window প্রবেশ করতে পারে না।
আবার চেষ্টা করুন
একটি মেসেজিং পাইপলাইনের মাধ্যমে postMessage পদ্ধতির মাধ্যমে ওয়েব কর্মী প্রসঙ্গে ( self )।
সঠিক!

পরবর্তী: একটি কংক্রিট ওয়েব কর্মী ব্যবহারের ক্ষেত্রে

পরবর্তী মডিউলে , একটি কংক্রিট ওয়েব ওয়ার্কার ব্যবহারের ক্ষেত্রে বিস্তারিত এবং প্রদর্শন করা হয়েছে। সেই মডিউলে, একজন ওয়েব কর্মীকে একটি প্রদত্ত URL থেকে একটি JPEG ফাইল আনতে এবং ওয়েব কর্মীতে এর Exif মেটাডেটা পড়তে ব্যবহার করা হয়। তারপর সেই ডেটা ব্যবহারকারীর কাছে প্রদর্শিত হওয়ার জন্য মূল থ্রেডে ফেরত পাঠানো হয়।