عندما يتعلق الأمر بـ HTML5، يتحدث الناس عنه دائمًا. هناك العديد من الميزات وواجهات برمجة التطبيقات المثيرة للاهتمام والتي يتم تحديثها. ومع ذلك، لا تزال العديد من أحذية الأطفال في المرحلة الدلالية وتتجاهل قوة HTML5.
سنناقش في هذا القسم عامل الويب متعدد الخيوط.
1. وضح أن جافا سكريبت هي لغة مفردةالميزة الرئيسية للغة JavaScript هي أنها أحادية الخيط، مما يعني أنها لا تستطيع سوى القيام بشيء واحد في كل مرة.
قد يبدو الأمر غريبًا، لماذا لا يتم تصميمه بخيوط متعددة لتحسين الكفاءة؟ يمكننا أن نفترض السيناريو:
افترض أن JavaScript يحتوي على خيطين في نفس الوقت، يضيف أحدهما المحتوى إلى عقدة DOM معينة، بينما يحذف الخيط الآخر العقدة، في هذه الحالة، ما هو الخيط الذي يجب أن يستخدمه المتصفح؟
باعتبارها لغة برمجة للمتصفح، فإن الغرض الرئيسي من JavaScript هو التفاعل مع المستخدمين ومعالجة DOM .
يحدد هذا أنه لا يمكن أن يكون سوى خيط واحد، وإلا فإنه سوف يسبب مشاكل مزامنة معقدة للغاية. من أجل تجنب التعقيد، كانت JavaScript ذات ترابط واحد منذ ولادتها، وقد أصبحت هذه سمة أساسية للغة ومن المتوقع أن يكون من الصعب تغييرها على المدى القصير.
لقد كان الترابط الفردي دائمًا نقطة ضعف من أجل الاستفادة من قوة الحوسبة CPU المركزية متعددة النواة، يقترح HTML5 معيار Web Worker ، والذي يسمح لبرامج JavaScript بإنشاء سلاسل رسائل متعددة. ومع ذلك، يتم التحكم في الخيط الفرعي بالكامل بواسطة الخيط الرئيسي ويجب ألا يقوم بتشغيل DOM .
لذلك، لا يغير هذا المعيار الجديد طبيعة الترابط الفردي لـ JavaScript .
Web Workers هو حل JavaScript متعدد الخيوط توفره المتصفحات الحديثة ويمكننا العثور على العديد من سيناريوهات الاستخدام:
1. يمكننا استخدام Web Worker للقيام ببعض العمليات الحسابية المكثفة؛
2. يمكن تنفيذ الاقتراع ويمكن تغيير بعض الدول.
3. تحديث حالة رسالة الرأس، مثل الإشعار بعدد الرسائل في رأس الصفحة؛
4. تفاعل المستخدم عالي التردد، والتدقيق الإملائي، على سبيل المثال: مساعدة المستخدمين على إكمال وظائف تصحيح أخطاء الإدخال والتصحيح بناءً على عادات إدخال المستخدم والسجلات التاريخية وذاكرة التخزين المؤقت وغيرها من المعلومات
5. التشفير: قد يستغرق التشفير في بعض الأحيان وقتًا طويلاً جدًا، خاصة إذا كنت بحاجة إلى تشفير الكثير من البيانات بشكل متكرر (على سبيل المثال، تشفير البيانات قبل إرسالها إلى الخادم).
6. جلب البيانات مسبقًا: من أجل تحسين موقع الويب الخاص بك أو تطبيق الويب الخاص بك وتحسين وقت تحميل البيانات، يمكنك استخدام Workers
لتحميل بعض البيانات مقدمًا في حالة احتياجك إليها.
يعد التشفير سيناريو رائعًا لاستخدام Web Worker لأنه لا يتطلب الوصول إلى DOM أو أي سحر آخر، فهو يستخدم فقط الخوارزميات لإجراء العمليات الحسابية. نظرًا لأن الجمهور يولي اهتمامًا متزايدًا بالبيانات الشخصية الحساسة، فقد أصبح أمن المعلومات والتشفير على رأس الأولويات. يمكن أن ينعكس هذا من حادث تسرب بيانات المستخدم 12306 الأخير.
بمجرد إجراء الحساب في العامل، يصبح الأمر سلسًا بالنسبة للمستخدم ولا يؤثر على تجربة المستخدم.
3. التوافق 4. المفاهيم الأساسية1. تذكر أولاً أن تحكم على ما إذا كان مدعومًا أم لا
إذا (window.Worker) { ...} 2. من السهل إنشاء worker جديد
const myWorker = new Worker('worker.js');تعد طريقة postMessage () ومعالج الأحداث onmessage بمثابة السحر الأسود للعمال.
3. يستخدم postMessage لإرسال الرسائل، ويستخدم onmessage للاستماع إلى الرسائل.
const عامل = new Worker('src/worker.js');worker.onmessage = e => { console.log(e.data);};worker.postMessage('كيف حالك!'); عند استخدامهما في الموضوع الرئيسي، يجب تعليق onmessage و postMessage() على كائن worker ، ولكن هذا غير مطلوب عند استخدامهما في worker . والسبب هو أنه داخل worker ، worker هو النطاق العالمي فعليًا.
4. معالجة الاستثناءات:
Worker.onerror = function(error) { console.log(error.message); 5. إنهاء worker
عامل.إنهاء();
يتم قتل مؤشر الترابط worker على الفور، دون أي فرصة له لإكمال عملياته أو تنظيفه.
6. في مؤشر ترابط worker ، يمكن workers أيضًا استدعاء طريقة close الخاصة بهم للإغلاق:
يغلق()؛5. بداية سريعة
من أجل فهم سريع، دعونا نفعل مثالا صغيرا: هيكل المشروع على النحو التالي
├──index.html└── src ├── main.js └── عامل.js
أتش تي أم أل
<html><head> <title>عرض عمل الويب</title> <meta charset=UTF-8 /></head><body> <div id=app> مرحبًا جارتو </div> <script src=src /main.js></script></body></html>
main.js
const عامل = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[من العامل]: ${message}`); ('app').innerHTML = message;};worker.postMessage('مكتوب بشكل جيد!');Work.js
onmessage = e => { const message = e.data; console.log(`[من الرئيسي]: ${message}`); لدعمكم ');الكود بسيط جدًا. يرسل الخيط الرئيسي: "إنه مكتوب بشكل جيد!"
تلقى عامل الويب الرسالة ووجد أن المحتوى يحتوي على كلمة "جيد" وأعادها إلى الموضوع الرئيسي: "شكرًا لك على دعمك".
6. القيود 1. داخل worker ، لا يمكن معالجة عقد DOM مباشرة، ولا يمكن استخدام الأساليب والخصائص الافتراضية لكائن window . ومع ذلك، يمكننا استخدام عدد كبير من الأشياء ضمن كائن window ، بما في ذلك آليات تخزين البيانات مثل WebSockets و IndexedDB Data Store API الخاصة FireFox OS .
هنا مثال، قمنا بتعديل main.js :
const عامل = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[من العامل]: ${message}`); ('app').innerHTML = message;};+ عامل.onerror = وظيفة(خطأ) {+ console.log(خطأ);+ عامل.إنهاء();+ };worker.postMessage('مكتوب بشكل جيد!'); لنقم بتعديل work.js مرة أخرى
+ تنبيه('jartto');onmessage = e => { const message = e.data; console.log(`[من الرئيسي]: ${message}`); if(message.indexOf('good') > - 1) { postMessage('شكرًا لك على دعمك' }};في هذا الوقت، سيتم الإبلاغ عن:
وذلك لأن: السياق الذي يتم تنفيذ worker.js فيه يختلف عن السياق الذي يتم فيه تنفيذ HTML للصفحة الرئيسية. كائن المستوى الأعلى ليس Window ، وهو السياق العام لتنفيذ woker.js ، ولكنه WorkerGlobalScope . دعونا نشرح بالتفصيل.
2. يتم نقل البيانات بين workers والخيط الرئيسي من خلال آلية الرسائل هذه: يستخدم كلا الطرفين طريقة postMessage() لإرسال رسائلهما الخاصة، ويستخدمان معالج حدث onmessage للرد على الرسالة (يتم تضمين الرسالة في سمة data لحدث Message ).
في هذه العملية، لا تتم مشاركة البيانات بل نسخها.
3. نفس قيود الأصل
يجب أن يكون لملف البرنامج النصي المخصص لمؤشر الترابط Worker نفس أصل ملف البرنامج النصي لمؤشر الترابط الرئيسي.
4. قيود الملف
لا يستطيع مؤشر ترابط Worker قراءة الملفات المحلية، أي أنه لا يمكنه فتح نظام الملفات المحلي （file://） يجب أن يأتي البرنامج النصي الذي يقوم بتحميله من الخادم.
5. الملفات المحلية غير مسموح بها
خطأ أمني لم يتم اكتشافه: فشل في إنشاء عامل:
البرنامج النصي في "(المسار)/worker.js"
لا يمكن الوصول إليه من الأصل "فارغ".
لا يسمح لك Chrome بتحميل عمال الويب عند تشغيل البرامج النصية من ملف محلي.
فكيف حلها؟ يمكننا تشغيل خادم محلي. يوصى باستخدام http-server ، وهو بسيط وسهل الاستخدام.
6. سياسة أمان المحتوى
لدى worker سياق التنفيذ الخاص به، والذي يختلف عن كائن document الذي قام بإنشائه. لذا بشكل عام، worker غير مقيد بسياسة أمان المحتوى الخاصة document (أو worker الأصلي ) الذي قام بإنشائه.
لنأخذ مثالاً، على افتراض أن document يحتوي على إعلان الرأس التالي:
سياسة أمان المحتوى: script-src 'self'
جزء من الغرض من هذا الإعلان هو منع التعليمات البرمجية النصية الموجودة بداخله من استخدام طريقة eval() . ومع ذلك، إذا قام البرنامج النصي بإنشاء worker ، فيمكن تنفيذ التعليمات البرمجية في سياق worker باستخدام eval() .
من أجل تحديد CSP للعامل، يجب إلحاق طلب إرسال رمز العامل نفسه بـ CSP.
الاستثناء الوحيد هو أنه إذا كان مصدر البرنامج النصي worker عبارة عن معرف فريد عالمي (على سبيل المثال، يحدد URL الخاص به مخطط بيانات أو blob )، فسوف يرث worker document أو CSP worker الذي قام بإنشائه.
حول، يمكننا العثور على الوثائق على MDN :
1. self :
يمكننا استخدام الخاصية self لـ WorkerGlobalScope للحصول على مرجع للكائن نفسه.
2. location :
تقوم سمة location بإرجاع كائن WorkerLocation المرتبط بمؤشر الترابط عند إنشائه، وهو يمثل عنوان URL المطلق لمورد البرنامج النصي المستخدم لتهيئة مؤشر ترابط العامل. لن يتغير موقع مورد URL هذا حتى إذا تمت إعادة توجيه الصفحة عدة مرات.
3. close :
إغلاق الموضوع الحالي، على غرار terminate .
4. caches :
يحتوي السياق الحالي على CacheStorage لضمان التوفر في وضع عدم الاتصال ويمكن تخصيص الاستجابة للطلب.
5. console :
دعم بناء جملة console .
6. importScripts
يمكننا تحميل وظائف المكتبة في worker من خلال url من خلال طريقة importScripts() .
7. XMLHttpRequest
ومن خلاله يمكن تقديم طلبات Ajax .
8. يمكنك استخدام:
هناك العديد API التي يمكن استخدامها، لذلك لن أقدم أمثلة واحدة تلو الأخرى هنا.
عندما يواجه worker خطأ قيد التشغيل، سيتم استدعاء معالج حدث onerror الخاص به. سيتلقى حدثًا يسمى error يعمل على توسيع واجهة ErrorEvent . الحدث لا يتصاعد ويمكن إلغاؤه.
لمنع تشغيل الإجراء الافتراضي، يمكن للعامل استدعاء أسلوب منع الافتراضي () لحدث الخطأ.
نستخدم عادةً المعلومات الأساسية الثلاثة التالية لأحداث الخطأ:
Worker.onerror = function(error) { console.log(error.message);ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.