Web Worker هو حل جافا سكريبت متعدد الخيوط مقدم من HTML5. يمكننا تسليم بعض التعليمات البرمجية المكثفة حسابيًا إلى عامل الويب للتشغيل دون تجميد واجهة المستخدم.
1: كيفية استخدام العاملالمبدأ الأساسي لـ Web Worker هو استخدام فئة Worker لتحميل ملف JavaScript في سلسلة المحادثات الرئيسية الحالية لـ JavaScript لفتح سلسلة رسائل جديدة، والتي لها تأثير التنفيذ غير المحظور وتوفر واجهة لتبادل البيانات بين سلسلة المحادثات الرئيسية والموضوع الجديد: postMessage، onmessage.
فكيف نستخدمها، دعونا نلقي نظرة على مثال:
//worker.jsonmessage =function (evt){ var d = evt.data;// احصل على البيانات المرسلة من خلال evt.data postMessage(d);// أرسل البيانات التي تم الحصول عليها إلى الموضوع الرئيسي}صفحة HTML: test.html
<!DOCTYPE HTML><html><head> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> <script type=text/javascript>// الموضوع الرئيسي لصفحة الويب var عامل = new Worker(worker.js); // أنشئ كائن عامل وقم بتمرير عنوان URL الخاص بالبرنامج النصي الذي سيتم تنفيذه في الموضوع الجديدworker.postMessage(helloworld);//أرسل البيانات إلى العاملworker.onmessage =function(evt){ // تلقي وظيفة البيانات console.log(evt.data) من العامل؛ // إخراج البيانات المرسلة من العامل} </script> </head> <body></body>< / أتش تي أم أل>بعد فتح test.html باستخدام متصفح Chrome، تقوم وحدة التحكم بإخراج helloworld، مما يشير إلى أنه تم تنفيذ البرنامج بنجاح.
من هذا المثال يمكننا أن نرى أن استخدام عمال الويب ينقسم بشكل أساسي إلى الأجزاء التالية:
الموضوع الرئيسي للويب:
1. قم بتحميل ملف JS من خلال عامل = عامل جديد (url) لإنشاء عامل وإرجاع مثيل عامل.
2. إرسال البيانات إلى العامل من خلال طريقةworker.postMessage(data).
3. قم بربط طريقة العامل.onmessage لتلقي البيانات المرسلة من قبل العامل.
4. يمكنك استخدامworker.terminate() لإنهاء تنفيذ العامل.
موضوع العامل الجديد:
1. أرسل البيانات إلى الموضوع الرئيسي من خلال طريقة postMessage (البيانات).
2. ربط طريقة onmessage لتلقي البيانات المرسلة بواسطة الموضوع الرئيسي.
2: ماذا يمكن للعامل أن يفعل؟الآن بعد أن عرفنا كيفية استخدام عامل الويب، ما هو استخدامه وما هي المشاكل التي يمكن أن يساعدنا في حلها. دعونا نلقي نظرة على مثال لتسلسل فيبوناتشي.
كما نعلم جميعًا، في الرياضيات، يتم تعريف تسلسل فيبوناتشي بشكل متكرر: F0=0، F1=1، Fn=F(n-1)+F(n-2) (n>=2, n∈N*)، التنفيذ الشائع لجافا سكريبت هو:
var fibonacci =function(n) { return n <2 n: الوسيطات.callee(n -1) + الوسيطات.callee(n -2);};//fibonacci(36)وقت تنفيذ استخدام هذه الطريقة لحساب تسلسل فيبوناتشي 39 في Chrome هو 19097 مللي ثانية، ولكن عندما يتعلق الأمر بحساب 40، يطالب المتصفح مباشرة بأن البرنامج النصي مشغول.
نظرًا لأنه يتم تنفيذ JavaScript في مؤشر ترابط واحد، فلن يتمكن المتصفح من تنفيذ نصوص JavaScript أخرى أثناء عملية حساب التسلسل، وسيتم أيضًا تعليق مؤشر ترابط عرض واجهة المستخدم، مما يتسبب في دخول المتصفح في حالة الزومبي. سيؤدي استخدام عامل الويب لوضع عملية حساب التسلسل في سلسلة رسائل جديدة إلى تجنب هذا الموقف. انظر أمثلة محددة:
//fibonacci.jsvar fibonacci =function(n) { return n <2? n : الوسيطات.callee(n -1) + الوسيطات.callee(n -2);};onmessage =function(event) { var n = parseInt (event.data، 10)؛ postMessage(fibonacci(n));};صفحة HTML: fibonacci.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>عامل الويب فيبوناتشي</title><script type=text/javascript > onload =function(){ var عامل =new Worker('fibonacci.js'); عامل.addEventListener('message', function(event) { var timer2 = (new Date()).valueOf(); console.log( 'النتيجة:'+event.data، 'الوقت:'+ timer2، 'الوقت المستغرق:'+ ( timer2 - timer ) }، false var timer = ( new Date()).valueOf(); console.log('بدء الحساب: 40', 'الوقت:' + timer ); console.log('تم تنفيذ وظيفة المؤقت عند حساب التسلسل', 'الوقت:'+ (new Date()).valueOf() );worker.postMessage(40); قمت بتنفيذ ', 'time:'+ (new Date()).valueOf() } </script></head><body></body></html> عند حساب التسلسلافتح fibonacci.html في Chrome، وستحصل وحدة التحكم على الإخراج التالي:
بدء العد: 40 الوقت: 1316508212705
عندما قمت بحساب التسلسل، قمت بتنفيذ الوقت: 1316508212734
وظيفة المؤقت التي يتم تنفيذها عند حساب التسلسل: 1316508213735
النتيجة: 102334155 الوقت: 1316508262820 الوقت المنقضي: 50115
يوضح هذا المثال أن حساب تسلسل فيبوناتشي الذي يتم تنفيذه في العامل لا يؤثر على تنفيذ التعليمات البرمجية للخيط الرئيسي، ويتم حسابه بالكامل في الخيط المستقل الخاص به، ويتم إرسال النتائج مرة أخرى إلى الخيط الرئيسي فقط بعد الحساب مكتمل.
باستخدام عمال الويب، يمكننا تنفيذ بعض العمليات المعقدة والواسعة النطاق على الواجهة الأمامية دون التأثير على عرض الصفحة، ولن تظهر المطالبة المشغولة بالبرنامج النصي المثير للاشمئزاز.
يستخدم المثال التالي عامل ويب لحساب وحدات البكسل في المشهد، عند فتح المشهد، يتم رسمه واحدًا تلو الآخر. يقوم العامل بحساب قيمة بكسل واحدة فقط.
ثالثاً: محاولات أخرى من قبل العاملنحن نعلم بالفعل أن العامل يقوم بإنشاء عامل من خلال تلقي عنوان URL، فهل يمكننا استخدام عمال الويب لتقديم بعض الطلبات المشابهة لـ jsonp؟ كما نعلم جميعًا، يقوم jsonp بتحميل بيانات json عن طريق إدراج علامات البرنامج النصي، ويقوم عنصر البرنامج النصي بتحميل وتنفيذ كل هذه العملية محظورة. سيكون من الرائع استخدام عمال الويب لتنفيذ التحميل غير المتزامن.
سيقوم المثال التالي بتحميل بيانات JSON بحجم 169.42 كيلو بايت من خلال ثلاث طرق مختلفة: عامل الويب، وjsonp، وajax.
// /aj/webWorker/core.jsfunction $E(id) { return document.getElementById(id);}onload =function() { // التحميل من خلال عامل الويب $E('workerLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face2'; var d = (new Date()).valueOf(); Worker(url); عامل.onmessage =function(obj) { console.log('web عامل: '+ ((new Date()).valueOf() - d) }; E('jsonpLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face1'; Date()).valueOf(); STK.core.io.scriptLoader({ الطريقة: 'post', url : url, onComplete : function() { console.log('jsonp: '+ ((new Date()) .valueOf() - d)); } }); // تحميل $E('ajaxLoad') من خلال ajax.onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face'; var d = (new Date()).valueOf(); json) { console.log('ajax: '+ ((new Date()).valueOf() - d));صفحة HTML:/aj/webWorker/worker.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>مثال العامل: تحميل البيانات</title><script src=http ://js.t.sinajs.cn/STK/js/gaea.1.14.js type=text/javascript></script><script type=text/javascript src=http://js.wcdn.cn/aj/webWorker/core.js></script></head><body> <نوع الإدخال=معرف الزر=workerLoad value=تحميل عامل الويب></input> < نوع الإدخال=معرف الزر=قيمة jsonpLoad=تحميل jsonp></input> <نوع الإدخال=معرف الزر=قيمة ajaxLoad=تحميل ajax></input></body></html>
قم بإعداد المضيف
127.0.0.1 js.wcdn.cn
قم بالوصول إلى الصفحة من خلال http://js.wcdn.cn/aj/webWorker/worker.html ثم قم بتحميل البيانات بثلاث طرق للحصول على مخرجات وحدة التحكم:
عامل الويب: 174jsonp: 25ajax: 38
بعد المحاولة عدة مرات، وجدت أن الفارق الزمني بين تحميل البيانات من خلال jsonp وajax لا يختلف كثيرًا، وأن وقت تحميل عامل الويب يكون دائمًا على مستوى عالٍ، لذا فإن استخدام عامل الويب لتحميل البيانات لا يزال بطيئًا نسبيًا، حتى في حالة حجم البيانات الكبير، لا توجد ميزة، فقد يستغرق العامل وقتًا لتهيئة سلاسل رسائل جديدة. ليس هناك أي ميزة سوى عدم الحظر أثناء التحميل.
فهل يمكن لعامل الويب دعم تحميل js عبر النطاق؟ هذه المرة يمكننا الوصول إلى الصفحة من خلال http://127.0.0.1/aj/webWorker/worker.html عند النقر على زر تحميل عامل الويب، لا ينعكس أي شيء في Chrome تظهر رسالة الخطأ التالية. من هذا يمكننا أن نعرف أن عامل الويب لا يدعم التحميل عبر النطاق لـ JS، وهو خبر سيئ لمواقع الويب التي تنشر ملفات ثابتة على خادم ثابت منفصل.
لذلك، لا يمكن استخدام عمال الويب إلا لتحميل بيانات json في نفس المجال، ويمكن لأياكس القيام بذلك بالفعل، وهو أكثر كفاءة وتنوعًا. دع العامل يفعل ما يجيده.
الرابع: التلخيصيبدو عمال الويب رائعين، لكنهم شيطانيون.
ما يمكننا القيام به:
1. يمكنك تحميل JS لإجراء عدد كبير من العمليات الحسابية المعقدة دون تعليق العملية الرئيسية، والتواصل من خلال postMessage، onmessage
2. يمكنك تحميل ملفات نصية إضافية في العامل من خلال importScripts(url)
3. يمكنك استخدام setTimeout() وclearTimeout() وsetInterval() وclearInterval()
4. يمكنك استخدام XMLHttpRequest لإرسال الطلبات
5. يمكن الوصول إلى بعض خصائص الملاح
ما هي القيود:
1. لا يمكن تحميل JS عبر المجالات
2. لا يمكن للكود الموجود داخل العامل الوصول إلى DOM
3. تحتوي المتصفحات المختلفة على تطبيقات مختلفة لـ Worker. على سبيل المثال، يسمح FF بإنشاء عوامل جديدة في Worker، لكن Chrome لا يسمح بذلك.
4. لا يدعم كل متصفح هذه الميزة الجديدة
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.