JavaScript Web Workers API – সম্পূর্ণ বাংলা টিউটোরিয়াল
বর্তমানে ওয়েব অ্যাপ্লিকেশনগুলোতে Heavy Computation বা বড় বড় কাজ ব্রাউজারের মেইন থ্রেডে করলে ইউজার ইন্টারফেস আটকে যায়। এই সমস্যা এড়াতে Web Workers API ব্যবহৃত হয়। এতে ব্যাকগ্রাউন্ড থ্রেডে কাজ করা যায়, ফলে UI দ্রুত এবং স্মুথ থাকে। এই টিউটোরিয়ালে আমরা বিস্তারিত জানব কিভাবে JavaScript Web Workers API ব্যবহার করতে হয়।
Web Workers API কী?
Web Workers API হল একটি ব্রাউজার API যা JavaScript কে ব্যাকগ্রাউন্ড থ্রেডে চালাতে সাহায্য করে। অর্থাৎ, এটি ব্রাউজারের মেইন থ্রেড থেকে আলাদা একটি থ্রেড তৈরি করে যেখানে হেভি কাজ করা হয়, ফলে UI ফ্রিজ বা স্লো হয় না।
Web Workers এর ধরন
| Worker Type | ব্যাখ্যা |
|---|---|
| Dedicated Worker | একটি নির্দিষ্ট স্ক্রিপ্টের জন্য তৈরি, মূল থ্রেডের সাথে একেকটি আলাদা Worker থাকে। |
| Shared Worker | একাধিক স্ক্রিপ্ট বা ট্যাব থেকে শেয়ার করা যায়, একই Worker সবাই ব্যবহার করতে পারে। |
Dedicated Worker তৈরি ও ব্যবহার
Dedicated Worker তৈরি করতে প্রথমে একটি আলাদা JavaScript ফাইল তৈরি করতে হয় যা Worker হিসেবে কাজ করবে। তারপর মূল স্ক্রিপ্ট থেকে সেই ফাইলটি লোড করা হয়।
<script>
// Dedicated Worker তৈরি ও কমিউনিকেশন// Worker ইনস্ট্যান্স তৈরি
const worker = new Worker(‘worker.js’);
// মেইন থ্রেড থেকে Worker কে মেসেজ পাঠানো
worker.postMessage(‘হ্যালো Worker!’);
// Worker থেকে মেসেজ রিসিভ করা
worker.onmessage = function(event) {
console.log(‘Worker থেকে:’, event.data);
};
</script>
<script>
// Worker.js ফাইল// মেইন থ্রেড থেকে মেসেজ গ্রহণ
onmessage = function(event) {
console.log(‘মেইন থ্রেড থেকে:’, event.data);
// কিছু হেভি কাজ (যেমন একটি লুপ)
let count = 0;
for(let i = 0; i < 100000000; i++) {
count += i;
}
// কাজ শেষ হলে মেইন থ্রেডে রেসপন্স পাঠানো
postMessage(‘কাজ শেষ হয়েছে, ফলাফল: ‘ + count);
};
</script>
Worker বন্ধ করা
কাজ শেষ হলে Worker বন্ধ করা উচিত, এতে মেমরি মুক্ত হয়।
worker.terminate(); // Worker বন্ধ করে দেয়
</script>
Web Worker এর সুবিধা ও সীমাবদ্ধতা
| সুবিধা | সীমাবদ্ধতা |
|---|---|
| UI ফ্রিজ হওয়া রোধ করে | Worker ফাইল আলাদা থাকতে হবে |
| কোম্পিউটেশন দ্রুত হয় | DOM এক্সেস সম্ভব নয় |
| কয়েকটি থ্রেডে কাজ ভাগ করা যায় | মেসেজ পাস করতে হয়, সরাসরি ডেটা শেয়ার সম্ভব নয় |
Web Worker এর অন্যান্য গুরুত্বপূর্ণ পয়েন্ট
- Worker-এর মধ্যে
windowঅবজেক্ট নেই,selfদিয়ে কাজ করে। - Web Worker এ
importScripts()দিয়ে এক বা একাধিক স্ক্রিপ্ট লোড করা যায়। - Worker এবং মেইন থ্রেডের মধ্যে মেসেজ পাস করতে
postMessage()এবংonmessageব্যবহার হয়।
উপসংহার
JavaScript Web Workers API ওয়েব ডেভেলপমেন্টে একটি শক্তিশালী টুল যা আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে। মেইন থ্রেডে বড় কম্পিউটেশন না রেখে ব্যাকগ্রাউন্ডে কাজ করানোর মাধ্যমে স্মুথ ইউজার এক্সপেরিয়েন্স দেয়। তাই, যখনই ভারি জাভাস্ক্রিপ্ট কাজ করতে চান, Web Workers ব্যবহার করুন।