Web Worker API (Web Worker API)
اینجا با «وب ورکر (Web Worker)» آشنا می شویم. وب ورکر یعنی اجرای جاوااسکریپت در پس زمینه. بنابراین صفحه کند نمی شود و کلیک ها روان می مانند.
وب ورکر چیست؟
اسکریپت سنگین وقتی در صفحه اجرا شود، صفحه گیر می کند. اما وب ورکر در پس زمینه می دود. بنابراین اسکرول و کلیک ادامه دارد.
بررسی پشتیبانی مرورگر
قبل از ساخت ورکر، وجود سازنده Worker را چک کن.
if (typeof(Worker) !== "undefined") {
// Web Worker پشتیبانی می شود;
// اینجا کد بساز;
} else {
// متاسفانه پشتیبانی نمی شود;
}
ساخت فایل وب ورکر
کد ورکر را در فایل جدا مثل demo_workers.js بنویس. با postMessage به صفحه پیام بده.
let i = 0;
function timedCount() {
i++;
postMessage(i);
setTimeout("timedCount()", 500);
}
timedCount();
ایجاد شیء وب ورکر در صفحه
اگر ورکر ساخته نشده بود، یکی بساز و سپس رویداد onmessage را تنظیم کن.
let w;
if (typeof(w) === "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
توقف و استفاده دوباره
برای آزادسازی منابع از terminate() استفاده کن. سپس می توانی متغیر را تهی کنی.
w.terminate();
w = undefined;
محدودیت دسترسی به DOM
ورکر خارج از صفحه است. پس به window، document و parent دسترسی ندارد. پیام ها را با postMessage جابه جا کن.
نکته: برای ذخیره نتایج سریع، Web Storage API را ببین. همچنین درباره واکشی داده به Fetch API سر بزن. برای مرور صفحه ها هم History API مفید است. اگر می خواهی درباره وب ورکر بیشتر بخوانی، همین صفحه مرجع است.
گام های عملی
- پشتیبانی
Workerرا بررسی کن. - فایل
demo_workers.jsرا بساز. - ورکر را ایجاد و
onmessageرا تنظیم کن. - در پایان با
terminate()آن را متوقف کن.
جمع بندی سریع
- وب ورکر کد را در پس زمینه اجرا می کند.
- صفحه هنگام کار روان می ماند.
- ارتباط با
postMessageانجام می شود. - به DOM مستقیم دسترسی ندارد.