Web Workers في HTML
سابقاً Drag and Drop نقل أو وسم حمولات DOM بأحداث المؤشر. هذا الدرس يترك إيماءات المؤشر ويقدّم Web Workers: تشغيل JavaScript في خيط خلفي حتى لا يجمّد حلقة طويلة الواجهة. النطاق عملي — إنشاء ورسائل وبلا DOM في العامل — لا أساطيل SharedWorker.
لماذا web workers في دورة HTML
المبتدئ يرى صفحة متجمدة عند حلقة مزدحمة على الخيط الرئيسي. العمال أول واجهة شائعة للحساب في الخلفية. بعد DnD يختلف التقسيم: سكربت الصفحة يملك DOM؛ العامل يملك الحساب ويتواصل بالرسائل فقط.
إجابة مباشرة
1) new Worker("worker.js") أو Blob. 2) postMessage من الصفحة. 3) في العامل onmessage ثم postMessage للنتيجة. 4) حدّث DOM في الصفحة فقط. 5) لا وصول مباشر لـ DOM. 6) فضّل http(s) أو Blob.
📊 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 واحد يبني عاملاً من Blob بلا worker.js منفصل. الصفحة ترسل رقماً؛ العامل يعيد مجموع حلقة.
<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 بدون ملف ثانٍ
- new Worker يبدأ سكربتاً خلفياً
- postMessage يرسل الرقم
- العامل يحسب ويعيد
- الصفحة تكتب في pre — DOM على الخيط الرئيسي
- بخلاف DnD: لا draggable
- أبقِ العرض صغيراً
الواجهة تبقى على الخيط الرئيسي
العامل يعيد بيانات؛ سكربت الصفحة يقرّر ما يراه المستخدم. العرض يطلب سلسلة ثم يحدّث الفقرة في onmessage الصفحة.
<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>
قراءة فكرة ملكية الواجهة
- العامل يردّد نصاً بلا document
- الصفحة تضع textContent
- نفس جسر الرسائل
- ليس DnD
- ليس Service Worker
- استخدم عاملاً عند عمل ثقيل يكفي لتجميد الواجهة
- التالي: SSE
متى تستخدم عاملاً
- حلقة CPU طويلة: مناسب
- تعديل نص صغير: غالباً الخيط الرئيسي
- سحب بطاقة: كان DnD
- GPS: كان Geolocation
- SharedWorker/Service Worker منتجات: خارج المقدمة
- تحديث أزرار من داخل العامل: غير مسموح
تمرين — أنشئ وأرسل وارسم
- جرّب عرض المجموع.
2) غيّر 40.
3) جرّب عرض الصدى.
4) اختياري: نمط worker.js على http(s).
5) جملة: DnD بالمؤشر؛ العمال بالحساب والرسائل.
6) فضّل http(s)/Blob.
7) التالي SSE.
أخطاء سهلة
- توقع querySelector داخل العامل
- عامل لمهمة تافهة
- الخلط مع DnD
- مسارات file:// هشة
- نسيان onmessage في الصفحة
- اعتبار Blob النمط الوحيد للإنتاج
- اعتبار المقدمة دورة SharedWorker كاملة
ملخص
- العمال يشغّلون JS خارج خيط الواجهة
- تواصل بـ postMessage/onmessage؛ ارسم DOM في الصفحة
- لا document/window في العامل الكلاسيكي
- Blob للعروض؛ http(s) لـ worker.js
- DnD كان نقل/وسم بالمؤشر؛ هنا حساب خلفي ورسائل
- التالي: SSE
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى