Web Worker يک کد JavaScript است که در پشت پرده، بدون اينکه تأثيري روی عملکرد صفحه داشته باشد، اجرا مي شود.
web worker چيست؟
زمانی که اسکريپت ها در صفحات HTML اجرا می شود، تا زماني که اجراي اسکريپت تمام نشود، صفحه به درخواست هاي کاربر پاسخ نمي دهد(unresponsive ).
Web Worker يک کد JavaScript است که در پشت پرده، مستقل از اسکريپت هاي ديگر بدون اينکه بر روي کارآيي و عملکرد صفحه تاثيري داشته باشد اجرا مي شود. با استفاده از اين متد مي توان در حين اجراي اسکريپت ها، به صورت عادي به کار با صفحه پرداخته و به کليک کردن و انجام ساير امور مورد نظر خود بپردازيد.
پشتيباني مرورگرها
مرورگرهاي Internet Explorer 10, Firefox, Opera, Chrome, Safari متد Web Worker را پشتيباني مي کنند.
مثال Web Worker در HTML5
مثال زير، يک Web Worker ساده ايجاد می کند که با کليک روي دکمه "Start Worker" شروع به شمارش اعداد مي کند:
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>
<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;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
آيا مرورگر از Web Worker پشتيباني مي کند؟
در مرحله اول بايد چک کرد که آيا مرورگر ما از متد Web Worker پشتيباني مي کند يا خير:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
ايجاد فايل Web Worker
در متد Web Worker کدهاي JavaScript مورد نظرمان را در يک فايل خارجي بنام "demo_workers.js" و در بيرون از صفحه قرار مي دهيم.
کد زير يک کد ساده JavaScript است که عمل شمارش را انجام مي دهد و فقط به عنوان يک مثال مطرح شده است:
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 بررسی می کند که آيا يک شي 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 برمي گردد، رويداد "onmessage" رخ مي دهد و کد داخل آن اجرا مي شود. اطلاعات برگشتي از Web Worker در event.data نگهداري مي شود.
خاتمه دادن به يک Web Worker
زمانی که شی ء Web Worker ایجاد می شود، تا زماني که به کار آن خاتمه ندهيد، براي دريافت پيام هاي ارسالي گوش مي دهد. (حتي بعد از پايان اسکريپت خارجي)
برای پایان دادن به کار Web Worker و آزاد کردن منابع مرورگر و کامپيوتر، از متد ()terminate استفاده کنيد:
مثال کاملی از Web Worker :
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <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;
};
} else {
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