HTML Web Workers

Web worker পিছনের গতিতে চলা JavaScript-এর একটি ব্যবস্থা। এটি পাতার কার্যকারিতা প্রভাবিত করবে না。

Web Worker কীভাবে?

HTML পাতায় স্ক্রিপ্ট চলাকালীন, পাতা প্রতিক্রিয়াহীন থাকবে পর্যন্ত যখন স্ক্রিপ্ট সম্পন্ন হয় না。

Web worker পিছনের গতিতে চলা JavaScript-এর একটি ব্যবস্থা। এটি অন্যান্য স্ক্রিপ্টকে প্রভাব ফেলবে না এবং পাতার কার্যকারিতা প্রভাবিত করবে না। আপনি যে কোনো কিছু করতে পারেন: ক্লিক, কনটেন্ট পছন্দ করা ইত্যাদি, এবং এই সময় web worker পিছনের গতিতে চলছে。

ব্রাউজার সমর্থন

টেবিলের সংখ্যা পূর্ণাত্মকভাবে Web Worker-এর সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে。

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers ইনস্ট্যান্স

নিচের উদাহরণটি একটি সাধারণ web worker তৈরি করে, পিছনের গণনা করে:

গণনা:

স্বয়ং প্রয়াস করুন

Web Worker সমর্থন পরীক্ষা

Web worker তৈরি করা পূর্বে, ব্যবহারকারীর ব্রাউজারটি Web worker-এর সমর্থন করছে কিনা নিশ্চিত করুন:

if (typeof(Worker) !== "undefined") {
    // হ্যাঁ! Web worker ədət aśi!
    // ər কোনো কোড.....
}
    // əmən！Web Worker ədət nai!
}

Web Worker ファイルの作成

এখন, আমরা একটি বাইরের JavaScript ফাইলে আমাদের web worker-কে তৈরি করতে চাই।

এখানে, আমরা গণনা স্ক্রিপ্ট তৈরি করছি।এই স্ক্রিপ্ট "demo_workers.js" ফাইলে সংরক্ষিত হবে:

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

এই কোডটির মধ্যে গুরুত্বপূর্ণ অংশটি postMessage() পদ্ধতিটি - এটি এইচটিএমএল পাতায় একটি বার্তা পাঠানোর জন্য ব্যবহৃত হয়。

মন্তব্য: web worker-টি সাধারণত এত সহজ স্ক্রিপ্টগুলির জন্য ব্যবহৃত হয় না, বরং CPU সংসাধনকে বেশি ব্যয়কারী কাজের জন্য ব্যবহৃত হয়。

যোগানো Web Worker উপকরণ

এখন আমরা web worker ফাইল পাচ্ছি, এটিকে HTML পাতা থেকে বিবেচনা করতে হবে。

নিচের কোডটি উপকরণটি কি পাওয়া যায় না তা পরীক্ষা করে, যদি না থাকে, - তবে একটি নতুন web worker উপকরণ তৈরি করে "demo_workers.js"-এর কোডটি চলানো হবে:

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

তারপরে, আমরা web worker-থেকে বার্তা পাওয়া যাবে。

একটি "onmessage" ইভেন্ট লিস্টিনার যোগ করুন web worker-কে:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

যখন web worker বার্তা পাঠায়, তখন ইভেন্ট লিস্টিনারের কোডটি চলে।এইচটিএমএল পাতা থেকে পাওয়া ডাটা event.data-এ সংরক্ষিত হয়。

সমাপ্ত Web Worker

যখন web worker তৈরি হয়, তা বাইরের স্ক্রিপ্ট সমাপ্ত হওয়ার পরও বাকি সময় পর্যন্ত বার্তা শুনতে চলেছে, পরবর্তীতে সমাপ্ত হতে পরেও。

যদি আপনি web worker-টি সমাপ্ত করতে চান এবং ব্রাউজার/কম্পিউটার সংসাধনকে মুক্ত করতে চান, terminate() পদ্ধতিকে ব্যবহার করুন:

w.terminate();

পুনর্ব্যবহারযোগ্য Web Worker

যদি আপনি worker বদলকে undefined করেন, তবে এই কোডটি তার পরেও পুনরায় ব্যবহার করা যাবে:

w = undefined;

সম্পূর্ণ Web Worker উদাহরণ কোড

আমরা .js ফাইলের Worker 代码 দেখেছি।তারপরে এই এইচটিএমএল পাতার কোডটি হল:

উদাহরণ

<!DOCTYPE html>
<html>
<body>
<p>সংখ্যা গণনা: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

স্বয়ং প্রয়াস করুন

Web Worker এবং DOM

কারণ web worker বাহিরীন ফাইলে অবস্থিত থাকে, তাই তারা নিম্নলিখিত JavaScript অবজেক্টকে পরিবেশন করতে পারে না:

  • window অবজেক্ট
  • document অবজেক্ট
  • parent অবজেক্ট