এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

মডিউল কর্মীদের সঙ্গে ওয়েব থ্রেডিং

ওয়েব কর্মীদের জাভাস্ক্রিপ্ট মডিউলের সাহায্যে ব্যাকগ্রাউন্ড থ্রেডে ভারী উত্তোলন সরানো এখন সহজ।

Jason Miller

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

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

এখানে কর্মী ব্যবহারের একটি সাধারণ উদাহরণ রয়েছে, যেখানে একজন কর্মী স্ক্রিপ্ট প্রধান থ্রেড থেকে বার্তা শোনে এবং তার নিজস্ব বার্তাগুলি ফেরত পাঠিয়ে প্রতিক্রিয়া জানায়:

page.js:

const worker = new Worker('worker.js');
worker.addEventListener('message', e => {
  console.log(e.data);
});
worker.postMessage('hello');

worker.js:

addEventListener('message', e => {
  if (e.data === 'hello') {
    postMessage('world');
  }
});

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

ইতিহাস: ক্লাসিক শ্রমিক

ওয়ার্কার কনস্ট্রাক্টর একটি ক্লাসিক স্ক্রিপ্ট ইউআরএল নেয়, যেটি ডকুমেন্ট ইউআরএলের সাথে আপেক্ষিক। এটি অবিলম্বে নতুন কর্মী দৃষ্টান্তের একটি রেফারেন্স ফেরত দেয়, যা একটি বার্তাপ্রেরণ ইন্টারফেসের পাশাপাশি একটি terminate() পদ্ধতি প্রকাশ করে যা কর্মীকে অবিলম্বে বন্ধ করে এবং ধ্বংস করে।

const worker = new Worker('worker.js');

একটি importScripts() ফাংশন অতিরিক্ত কোড লোড করার জন্য ওয়েব কর্মীদের মধ্যে উপলব্ধ, কিন্তু এটি প্রতিটি স্ক্রিপ্ট আনয়ন এবং মূল্যায়ন করার জন্য কর্মীর সম্পাদনে বিরতি দেয়। এটি একটি ক্লাসিক <script> ট্যাগের মতো গ্লোবাল স্কোপে স্ক্রিপ্টগুলিও চালায়, যার অর্থ একটি স্ক্রিপ্টের ভেরিয়েবল অন্য স্ক্রিপ্টের ভেরিয়েবল দ্বারা ওভাররাইট করা যেতে পারে।

worker.js:

importScripts('greet.js');
// ^ could block for seconds
addEventListener('message', e => {
  postMessage(sayHello());
});

greet.js:

// global to the whole worker
function sayHello() {
  return 'world';
}

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

মডিউল কর্মীদের প্রবেশ করুন

জাভাস্ক্রিপ্ট মডিউলের কর্মক্ষমতা এবং কর্মক্ষমতা সুবিধা সহ ওয়েব কর্মীদের জন্য একটি নতুন মোড Chrome 80-এ শিপিং করা হয়, যাকে মডিউল কর্মী বলা হয়। Worker কনস্ট্রাক্টর এখন একটি নতুন {type:"module"} বিকল্প গ্রহণ করে, যা <script type="module"> মেলে স্ক্রিপ্ট লোডিং এবং এক্সিকিউশন পরিবর্তন করে।

const worker = new Worker('worker.js', {
  type: 'module'
});

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

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

worker.js:

import { sayHello } from './greet.js';
addEventListener('message', e => {
  postMessage(sayHello());
});

greet.js:

import greetings from './data.js';
export function sayHello() {
  return greetings.hello;
}

দুর্দান্ত পারফরম্যান্স নিশ্চিত করতে, পুরানো importScripts() পদ্ধতিটি মডিউল কর্মীদের মধ্যে উপলব্ধ নেই। জাভাস্ক্রিপ্ট মডিউল ব্যবহার করার জন্য কর্মীদের পরিবর্তন করার অর্থ হল সমস্ত কোড কঠোর মোডে লোড করা হয়েছে। আরেকটি উল্লেখযোগ্য পরিবর্তন হল যে একটি জাভাস্ক্রিপ্ট মডিউলের শীর্ষ-স্তরের সুযোগে this মান undefined , যেখানে ক্লাসিক কর্মীদের মধ্যে মান হল কর্মীর বিশ্বব্যাপী সুযোগ। সৌভাগ্যবশত, সর্বদা একটি self গ্লোবাল আছে যা বিশ্বব্যাপী সুযোগের একটি রেফারেন্স প্রদান করে। এটি পরিষেবা কর্মীদের পাশাপাশি DOM-এ সব ধরনের কর্মীদের মধ্যে উপলব্ধ।

`modulepreload` সহ শ্রমিকদের প্রিলোড করুন

একটি উল্লেখযোগ্য কর্মক্ষমতা উন্নতি যা মডিউল কর্মীদের সাথে আসে তা হল কর্মীদের প্রিলোড করার ক্ষমতা এবং তাদের নির্ভরতা। মডিউল কর্মীদের সাথে, স্ক্রিপ্টগুলি স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট মডিউল হিসাবে লোড করা হয় এবং কার্যকর করা হয়, যার অর্থ modulepreload ব্যবহার করে সেগুলি প্রিলোড করা এবং এমনকি পূর্ব-পার্স করা যেতে পারে:

<!-- preloads worker.js and its dependencies: -->
<link rel="modulepreload" href="worker.js">

<script>
  addEventListener('load', () => {
    // our worker code is likely already parsed and ready to execute!
    const worker = new Worker('worker.js', { type: 'module' });
  });
</script>

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

পূর্বে, ওয়েব কর্মী স্ক্রিপ্টগুলি প্রিলোড করার জন্য উপলব্ধ বিকল্পগুলি সীমিত ছিল এবং অগত্যা নির্ভরযোগ্য ছিল না। প্রিলোড করার জন্য ক্লাসিক কর্মীদের নিজস্ব "কর্মী" রিসোর্স টাইপ ছিল, কিন্তু কোনো ব্রাউজার <link rel="preload" as="worker"> প্রয়োগ করেনি। ফলস্বরূপ, ওয়েব কর্মীদের প্রিলোড করার জন্য উপলব্ধ প্রাথমিক কৌশলটি ছিল <link rel="prefetch"> ব্যবহার করা, যা সম্পূর্ণরূপে HTTP ক্যাশের উপর নির্ভর করে। সঠিক ক্যাশিং শিরোনামগুলির সাথে সংমিশ্রণে ব্যবহার করা হলে, এটি ওয়ার্কার স্ক্রিপ্ট ডাউনলোড করার জন্য অপেক্ষা করতে থাকা কর্মী ইন্সট্যান্টেশন এড়ানো সম্ভব করে তোলে। যাইহোক, modulepreload বিপরীতে এই কৌশলটি প্রিলোডিং নির্ভরতা বা প্রাক-পার্সিং সমর্থন করে না।

ভাগ করা কর্মীদের সম্পর্কে কি?

ক্রোম 83-এর মতো জাভাস্ক্রিপ্ট মডিউলের সমর্থনে শেয়ার্ড ওয়ার্কারদের আপডেট করা হয়েছে। ডেডিকেটেড ওয়ার্কারদের মতো, {type:"module"} বিকল্পের সাহায্যে শেয়ার্ড ওয়ার্কার তৈরি করা হলে এখন ওয়ার্কার স্ক্রিপ্টকে ক্লাসিক স্ক্রিপ্টের বদলে মডিউল হিসেবে লোড করা হয়:

const worker = new SharedWorker('/worker.js', {
  type: 'module'
});

জাভাস্ক্রিপ্ট মডিউল সমর্থন করার আগে, SharedWorker() কনস্ট্রাক্টর শুধুমাত্র একটি URL এবং একটি ঐচ্ছিক name আর্গুমেন্ট আশা করেছিল। এটি ক্লাসিক শেয়ার্ড ওয়ার্কার ব্যবহারের জন্য কাজ চালিয়ে যাবে; তবে মডিউল শেয়ার্ড ওয়ার্কার তৈরির জন্য নতুন options আর্গুমেন্ট ব্যবহার করতে হবে। উপলভ্য বিকল্পগুলি একজন নিবেদিত কর্মীর জন্য একই, যার মধ্যে name বিকল্পটি রয়েছে যা পূর্ববর্তী name যুক্তিকে ছাড়িয়ে যায়।

সেবা কর্মী সম্পর্কে কি?

পরিষেবা কর্মী স্পেসিফিকেশন ইতিমধ্যেই আপডেট করা হয়েছে একটি জাভাস্ক্রিপ্ট মডিউলকে এন্ট্রি পয়েন্ট হিসাবে গ্রহণ করতে সমর্থন করার জন্য, একই {type:"module"} বিকল্পটি মডিউল কর্মী হিসাবে ব্যবহার করে, যদিও এই পরিবর্তনটি ব্রাউজারগুলিতে কার্যকর করা হয়নি। একবার এটি হয়ে গেলে, নিম্নলিখিত কোড ব্যবহার করে একটি জাভাস্ক্রিপ্ট মডিউল ব্যবহার করে একজন পরিষেবা কর্মীকে ইনস্ট্যান্ট করা সম্ভব হবে:

navigator.serviceWorker.register('/sw.js', {
  type: 'module'
});

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

অতিরিক্ত সম্পদ এবং আরও পড়া

বৈশিষ্ট্যের স্থিতি, ব্রাউজার ঐক্যমত্য এবং প্রমিতকরণ
মূল মডিউল কর্মীদের বিশেষ সংযোজন
ভাগ করা কর্মীদের জন্য জাভাস্ক্রিপ্ট মডিউল
পরিষেবা কর্মীদের জন্য জাভাস্ক্রিপ্ট মডিউল: ক্রোম বাস্তবায়ন অবস্থা

Jason Miller

page.js:

const worker = new Worker('worker.js');
worker.addEventListener('message', e => {
  console.log(e.data);
});
worker.postMessage('hello');

worker.js:

addEventListener('message', e => {
  if (e.data === 'hello') {
    postMessage('world');
  }
});

ইতিহাস: ক্লাসিক শ্রমিক

const worker = new Worker('worker.js');

worker.js:

importScripts('greet.js');
// ^ could block for seconds
addEventListener('message', e => {
  postMessage(sayHello());
});

greet.js:

// global to the whole worker
function sayHello() {
  return 'world';
}

মডিউল কর্মীদের প্রবেশ করুন

const worker = new Worker('worker.js', {
  type: 'module'
});

worker.js:

import { sayHello } from './greet.js';
addEventListener('message', e => {
  postMessage(sayHello());
});

greet.js:

import greetings from './data.js';
export function sayHello() {
  return greetings.hello;
}

`modulepreload` সহ শ্রমিকদের প্রিলোড করুন

<!-- preloads worker.js and its dependencies: -->
<link rel="modulepreload" href="worker.js">

<script>
  addEventListener('load', () => {
    // our worker code is likely already parsed and ready to execute!
    const worker = new Worker('worker.js', { type: 'module' });
  });
</script>

প্রিলোড করা মডিউলগুলি প্রধান থ্রেড এবং মডিউল কর্মীদের উভয়ই ব্যবহার করতে পারে। এটি এমন মডিউলগুলির জন্য উপযোগী যেগুলি উভয় প্রসঙ্গেই আমদানি করা হয়, বা এমন ক্ষেত্রে যেখানে একটি মডিউল মূল থ্রেডে বা একজন কর্মীতে ব্যবহার করা হবে কিনা তা আগে থেকে জানা সম্ভব নয়৷

ভাগ করা কর্মীদের সম্পর্কে কি?

const worker = new SharedWorker('/worker.js', {
  type: 'module'
});

সেবা কর্মী সম্পর্কে কি?

navigator.serviceWorker.register('/sw.js', {
  type: 'module'
});

অতিরিক্ত সম্পদ এবং আরও পড়া

বৈশিষ্ট্যের স্থিতি, ব্রাউজার ঐক্যমত্য এবং প্রমিতকরণ
মূল মডিউল কর্মীদের বিশেষ সংযোজন
ভাগ করা কর্মীদের জন্য জাভাস্ক্রিপ্ট মডিউল
পরিষেবা কর্মীদের জন্য জাভাস্ক্রিপ্ট মডিউল: ক্রোম বাস্তবায়ন অবস্থা

মডিউল কর্মীদের সঙ্গে ওয়েব থ্রেডিং

ইতিহাস: ক্লাসিক শ্রমিক

মডিউল কর্মীদের প্রবেশ করুন

modulepreload সহ শ্রমিকদের প্রিলোড করুন

ভাগ করা কর্মীদের সম্পর্কে কি?

সেবা কর্মী সম্পর্কে কি?

অতিরিক্ত সম্পদ এবং আরও পড়া

ইতিহাস: ক্লাসিক শ্রমিক

মডিউল কর্মীদের প্রবেশ করুন

modulepreload সহ শ্রমিকদের প্রিলোড করুন

ভাগ করা কর্মীদের সম্পর্কে কি?

সেবা কর্মী সম্পর্কে কি?

অতিরিক্ত সম্পদ এবং আরও পড়া

`modulepreload` সহ শ্রমিকদের প্রিলোড করুন

`modulepreload` সহ শ্রমিকদের প্রিলোড করুন