کارگران وب (Web Workers)
«کارگر وب (Web Worker)» یک فایل جاوااسکریپت خارجی است. این فایل در پس زمینه اجرا می شود. بنابراین رابط کاربری گیر نمی کند. همچنان می توانی کلیک کنی و اسکرول کنی.
کارگر وب چیست؟
وقتی اسکریپت سنگین باشد، صفحه قفل می شود. اما کارگر وب، کد سنگین را جدا اجرا می کند. پس صفحه روان می ماند.
نمونه ساخت و توقف Worker
در این نمونه، شمارنده در پس زمینه زیاد می شود. سپس خروجی روی صفحه می آید.
<output id="result"></output>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<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>
نکته: کارگران وب برای کارهای پردازشی سنگین عالی هستند.
بررسی پشتیبانی مرورگر
قبل از استفاده، وجود شی Worker را چک کن.
<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>
نوشتن فایل worker (demo_workers.js)
این فایل شمارنده را زیاد می کند. سپس با postMessage() نتیجه را می فرستد.
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();
ساخت شی Worker و دریافت پیام
اگر Worker ساخته نشده بود، یکی بساز. سپس رویداد onmessage را تنظیم کن.
<script>
if (typeof(w) === "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
<\/script>
پایان دادن و استفاده دوباره
برای آزادسازی منابع، Worker را خاتمه بده. سپس متغیر را خالی کن.
<script>
w.terminate();
w = undefined;
<\/script>
محدودیت دسترسی کارگران وب
Worker به DOM دسترسی مستقیم ندارد. به window و document هم دسترسی ندارد. ارتباط فقط با پیام است.
برای مدیریت داده محلی، ذخیره سازی وب را ببین. برای آشنایی با «کارگران وب» بیشتر، از لینک داخلی کارگران وب استفاده کن.
جمع بندی سریع
- Worker کد سنگین را جدا اجرا می کند.
- ارتباط با postMessage و onmessage است.
- به DOM دسترسی مستقیم ندارد.
- با terminate منابع را آزاد کن.
- قبل از شروع، پشتیبانی را چک کن.