در حال بارگذاری...

Web Workers در HTML

درس قبل، Drag and Drop با رویدادهای اشاره‌گر بار DOM را جابه‌جا یا برچسب می‌زد. این درس ژست اشاره‌گر را ترک می‌کند و Web Workers را معرفی می‌کند: اجرای جاوااسکریپت در thread پس‌زمینه تا حلقهٔ طولانی UI را قفل نکند. HTML هنوز اسکریپت بار می‌کند؛ اسکریپت Worker می‌سازد، با postMessage کار می‌فرستد و وقتی message آمد نتیجه را می‌کشد. دامنه عملی است — ساخت، پیام، بدون DOM در worker — نه ناوگان SharedWorker یا کورس کامل همزمانی.

چرا web workers در کورس HTML

مبتدی وقتی حلقهٔ شلوغ روی thread اصلی می‌دود صفحه را قفل‌شده می‌بیند. Workerها اولین API رایج برای «محاسبه در پس‌زمینه»اند. بعد از «JS drop اشاره‌گر را مدیریت می‌کند»، تقسیم اینجا فرق دارد: اسکریپت صفحه مالک DOM و UI است؛ worker محاسبهٔ سنگین دارد و فقط با پیام حرف می‌زند. new Worker(…)، postMessage / onmessage، و قانون «worker نمی‌تواند document.querySelector بزند» کافی است.

پاسخ مستقیم

۱) با new Worker("worker.js") (یا Blob در دموی تک‌فایل) worker بسازید. ۲) از صفحه worker.postMessage(data) بفرستید. ۳) در worker به onmessage گوش دهید، محاسبه کنید، postMessage(result) برگردانید. ۴) روی صفحه در worker.onmessage DOM را به‌روز کنید — هرگز داخل worker. ۵) worker اختصاصی کلاسیک به DOM / window / document دسترسی مستقیم ندارد. ۶) میزبانی http(s) (یا دموی Blob) را ترجیح دهید؛ مسیرهای عجیب file:// اغلب شکست می‌خورند.

📊 main thread vs worker

Topic	Main page script	Dedicated worker
Typical role	UI, DOM, create Worker	Heavy compute off UI thread
Talks via	postMessage / onmessage	postMessage / onmessage
Can touch DOM?	Yes	No — return data instead
Beginner entry	new Worker(url or Blob)	onmessage + compute + postMessage
This course depth	Required	Required (simple round-trip)
Not this lesson	Drag-and-drop gestures	SharedWorker / Service Worker products

دموی کوچک رفت‌وبرگشت Blob Worker

این HTML تک‌فایل worker را از Blob می‌سازد تا به worker.js جدا نیاز نباشد. صفحه عددی می‌فرستد؛ worker نتیجهٔ حلقهٔ جمع را برمی‌گرداند.

Blob Worker compute round-trip

html

<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>

خواندن فراخوانی‌های رفت‌وبرگشت

Blob + createObjectURL URL اسکریپت worker بدون فایل دوم می‌سازد
new Worker(url) اسکریپت پس‌زمینه را شروع می‌کند
postMessage(40) عدد را به worker می‌فرستد
onmessage در worker حلقه می‌زند و مجموع را برمی‌گرداند
onmessage صفحه در <pre> می‌نویسد — DOM روی thread اصلی می‌ماند
برخلاف Drag and Drop از draggable یا dataTransfer خبری نیست — thread + پیام است
دمو را کوچک نگه دارید: یک پیام ورود، یک نتیجه

UI روی thread اصلی می‌ماند

Worker داده برمی‌گرداند؛ اسکریپت صفحه تصمیم می‌گیرد کاربر چه ببیند. این دمو از worker یک رشته می‌خواهد؛ سپس onmessage صفحه پاراگراف را به‌روز می‌کند — ثابت می‌کند worker به DOM دست نزده.

Worker replies; page updates DOM

html

<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>

خواندن ایدهٔ مالکیت UI

Worker فقط رشته را echo می‌کند — بدون document
onmessage صفحه msg.textContent را می‌گذارد
همان پل پیام؛ بار متفاوت
هنوز Drag and Drop نیست
هنوز درس Service Worker / PWA نیست
وقتی کار آن‌قدر سنگین است که UI ممکن است قفل شود worker بگذارید
درس بعدی اختیاری: SSE رویداد سرور را به صفحه می‌فرستد

انتخاب زمان استفاده از worker

حلقهٔ CPU طولانی که اسکرول را قفل می‌کند: مناسب مقدمه
تغییر تک‌خطی رشته: معمولاً روی thread اصلی بمانید
انتقال کارت به منطقهٔ خط‌چین: آن Drag and Drop بود
خواندن GPS: آن Geolocation بود
هاب SharedWorker / محصول کش Service Worker: فراتر از مقدمهٔ HTML
به‌روزرسانی دکمه از داخل worker: مجاز نیست — به صفحه پیام بدهید

تمرین — بسازید، پیام بدهید، بکشید

دموی جمع Blob را بچسبانید؛ دکمه را بزنید؛ مجموع ظاهر شود.
40 را به n کوچک دیگر عوض کنید؛ نتیجه عوض شود.
دموی echo را بچسبانید؛ پاراگراف فقط بعد از پاسخ worker به‌روز شود.
(اختیاری) الگوی واقعی worker.js با new Worker("worker.js") روی http(s) را ببینید.
جمله: Drag and Drop با اشاره‌گر جابه‌جا/برچسب می‌کند؛ Web Workers خارج از thread با پیام محاسبه می‌کنند.
اگر URL Worker شکست خورد http(s) یا Blob را به file:// ترجیح دهید.
جلوتر: SSE به‌روزرسانی از سرور — نه workerهای CPU پس‌زمینه.

اشتباهات آسان

انتظار کار document.querySelector داخل worker اختصاصی کلاسیک
استفاده از worker برای کار ریز که به thread دوم نیاز ندارد
اشتباه گرفتن Web Workers با Drag and Drop (پیام ≠ بار اشاره‌گر)
بارگذاری worker.js از origin ناسازگار یا مسیر شکنندهٔ file://
فراموش onmessage روی صفحه تا نتیجه نیاید
گرفتن دموی Blob به‌عنوان تنها الگوی تولید (اپ واقعی اغلب فایل .js دارد)
گرفتن این مقدمه به‌عنوان کورس SharedWorker، Service Worker، یا گواهی همزمانی کامل

خلاصه

Web Workers جاوااسکریپت را خارج از thread اصلی UI اجرا می‌کنند
با postMessage / onmessage حرف بزنید؛ DOM را فقط روی صفحه بکشید
worker کلاسیک به document / window دسترسی ندارد
برای دموی تک‌فایل Blob؛ برای worker.js واقعی http(s)
Drag and Drop جابه‌جایی/برچسب با اشاره‌گر بود؛ این درس محاسبهٔ پس‌زمینه + پیام است
بعدی: SSE در HTML برای رویدادهای هل‌شده از سرور

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود