API وب ورکر (Web Worker) در HTML
یک وب ورکر، یک فایل جاوا اسکریپت خارجی است که در پسزمینه اجرا میشود، بدون اینکه بر عملکرد صفحه تأثیر بگذارد.
هنگام اجرای اسکریپتها در یک صفحه HTML، صفحه تا زمانی که اجرای اسکریپت تمام شود، غیرپاسخگو (unresponsive) میشود.
یک وب ورکر، یک فایل جاوا اسکریپت خارجی است که در پسزمینه و مستقل از سایر اسکریپتها اجرا میشود، بدون اینکه بر عملکرد صفحه تأثیر بگذارد. شما میتوانید به انجام هر کاری که میخواهید ادامه دهید: کلیک کردن، انتخاب موارد و غیره، در حالی که وب ورکر در پسزمینه در حال اجراست.
وب ورکرها برای کدهای سنگینی که نمیتوانند روی نخ اصلی (main thread) اجرا شوند، بدون اینکه باعث ایجاد وظایف طولانی و غیرپاسخگو شدن صفحه شوند، مفید هستند.
اعداد داخل جدول، اولین نسخه از مرورگر را مشخص میکنند که بهطور کامل از API وب ورکر پشتیبانی میکند.
مثال زیر یک وب ورکر ساده ایجاد میکند که اعداد را در پسزمینه میشمارد:
شمارش اعداد: <output id="result"></output> <button>شروع ورکر</button> <button>توقف ورکر</button>
نکته: معمولاً وب ورکرها برای چنین اسکریپتهای سادهای استفاده نمیشوند، بلکه برای وظایفی که پردازنده را بیشتر درگیر میکنند (CPU intensive) به کار میروند!
پیش از استفاده از وب ورکر، میتوانیم بهسرعت پشتیبانی مرورگر را بررسی کنیم:
تست پشتیبانی مرورگر:
<script>
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
x.innerHTML = "Your browser support Web Workers!";
} else {
x.innerHTML = "Sorry, your browser does not support Web Workers.";
}
</script>
حالا بیایید یک وب ورکر در یک فایل جاوا اسکریپت خارجی ایجاد کنیم.
در اینجا ما اسکریپتی مینویسیم که شمارش انجام میدهد. این اسکریپت در فایل "demo_workers.js" ذخیره میشود:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
نکته: بخش مهم کد بالا، متد postMessage() است که برای ارسال پیام به صفحه HTML استفاده میشود.
پس از اینکه فایل وب ورکر .js را ایجاد کردیم، میتوانیم آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی میکنند که آیا یک ورکر (w) از قبل وجود دارد یا نه؛ اگر وجود نداشته باشد، یک شیء وب ورکر جدید ایجاد کرده و به فایل .js یعنی "demo_workers.js" اشاره میکند:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
سپس میتوانیم پیامها را از وب ورکر ارسال و دریافت کنیم.
دادهها بین وب ورکرها و نخ اصلی از طریق یک سیستم پیامرسانی منتقل میشوند - هر دو طرف پیامهای خود را با استفاده از متد postMessage() ارسال میکنند و به پیامها از طریق رویداد onmessage پاسخ میدهند.
یک شنونده رویداد (event listener) onmessage به شیء وب ورکر اضافه کنید.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
وقتی وب ورکر در فایل .js پیامی را ارسال میکند، کدی که درون شنونده رویداد قرار دارد اجرا میشود. دادهی ارسالشده از وب ورکر در event.data ذخیره میشود.
وقتی یک شیء وب ورکر ایجاد میشود، تا زمانی که به آن خاتمه داده نشود، به گوش دادن به پیامها ادامه خواهد داد.
برای خاتمه دادن به یک شیء وب ورکر و آزاد کردن منابع مرورگر/کامپیوتر، از متد terminate() استفاده کنید:
w.terminate();
اگر متغیر وب ورکر را پس از خاتمه دادن به آن، برابر undefined قرار دهید، میتوانید دوباره از آن ورکر/کد استفاده کنید:
w = undefined;
ما قبلاً کد وب ورکر را در فایل .js دیدهایم.
در زیر کد کامل برای صفحه HTML آمده است:
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
x.innerHTML = event.data;
};
} else {
x.innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
از آنجایی که وب ورکرها در فایلهای .js خارجی قرار دارند، به اشیاء جاوا اسکریپت زیر دسترسی ندارند:
شیء window
شیء document
شیء parent
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/