Web Worker-Nutzungshandbuch für HTML5_HTML5-Tutorial-Tipps

Web Workers ist eine von HTML5 bereitgestellte Javascript-Multithreading-Lösung. Wir können rechenintensiven Code zur Ausführung an Web Worker übergeben, ohne dass die Benutzeroberfläche einfriert.
1: So verwenden Sie Worker

Das Grundprinzip von Web Worker besteht darin, mithilfe der Worker-Klasse eine Javascript-Datei in den aktuellen Hauptthread von Javascript zu laden, um einen neuen Thread zu öffnen, was zu einer nicht blockierenden Ausführung führt und Daten zwischen dem Hauptthread und dem Hauptthread bereitstellt der neue Thread. Getauschte Schnittstellen: postMessage, onmessage.

Wie man es benutzt, schauen wir uns ein Beispiel an:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. //worker.js
2. onmessage =function (evt){
3. var d = evt.data;//Erhalten Sie die über evt.data gesendeten Daten
4. postMessage( d );//Sende die erhaltenen Daten an den Hauptthread
5. }

HTML-Seite: test.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. HTML>  
2. html>  
3. span Stil="width: auto; height: auto; float: none;" id="20_nwp">a Stil="text- Dekoration: keine; ="_blank" href="http://cpro.baidu.com/ cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0& rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="20_nwl">span Stil="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head span>a>span>>    meta http-equiv=
4. " Content-Type" content="text/html;  charset=utf-8"/>   
5.  Skript Typ="text/ span style="width: auto; Höhe: automatisch; float: none;" id="21_nwp"> a style="text-decoration: none;" mpid="21" Ziel="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=619521ab1ccffd45&k=javascript&k0=javascript&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&st id=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="21_nwl">< ;span style="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascriptspan>a>span>">  
6. //WEB页主线程   
7. var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL   
8.  worker.postMessage("hello world");     //向worker发送数据   
9.  worker.onmessage =function(evt){     //接收worker传过来的数据 span style="width: auto; height: auto; float: none ;" id="22_nwp"> ein Stil="text-decoration: none;"  mpid="22" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch =0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=����&k0=����&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http ://www.admin10000.com/document/1183.html&urlid=0" id="22_nwl">span style="color:#0000ff ;font-size:14px;width:auto;height:auto;float:none;">函数 span>a>span>  
10.    console.log(evt.span style= "width: auto; height: auto; float: none;" id="23_nwp">a Stil="text-decoration: none;" mpid="23" Ziel="_blank" href="http://cpro.baidu.com/cpro/ ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1 &seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid= 0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id= „23_nwl“>span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">dataspan>a>span>);              //输出worker发送来的数据   
11.  }
12. Skript>
13. Kopf>
14. Körper>Körper>
15. html>

Nach dem Öffnen von test.html mit dem Chrome-Browser gibt die Konsole „Hallo Welt“ aus und zeigt damit an, dass die Programmausführung erfolgreich war.

Anhand dieses Beispiels können wir sehen, dass die Verwendung von Web Workern hauptsächlich in die folgenden Teile unterteilt ist

WEB-Hauptthread:

1. Laden Sie eine JS-Datei über worker = new Worker( url), um einen Worker zu erstellen und eine Worker-Instanz zurückzugeben.

　2. Senden Sie Daten über die Methode worker.postMessage(data) an den Worker.

3. Binden Sie die Methode worker.onmessage, um die vom Worker gesendeten Daten zu empfangen.

4. Sie können worker.terminate() verwenden, um die Ausführung eines Workers zu beenden.

Arbeiter neuer Thread:

　1. Senden Sie Daten über die postMessage(data)-Methode an den Hauptthread.

　2. Binden Sie die Onmessage-Methode, um die vom Hauptthread gesendeten Daten zu empfangen.
2: Was kann der Arbeitnehmer tun?

Jetzt wissen wir, wie man Web Worker verwendet, wozu er dient und welche Probleme er uns bei der Lösung helfen kann. Schauen wir uns ein Beispiel der Fibonacci-Folge an.

Jeder weiß, dass die Fibonacci-Folge in der Mathematik rekursiv definiert ist: F0=0, F1=1, Fn=F(n-1) F(n-2) (n>=2, n∈N* ), und die übliche Implementierung von Javascript ist:

JavaScript-CodeInhalt in die Zwischenablage kopieren

2. var fibonacci =Funktion(n) {
3. return n
};
5. //fibonacci(36)

Die Verwendung dieser Methode in Chrome zur Ausführung der Fibonacci-Folge von 39 dauert 19097 Millisekunden, aber wenn es um die Berechnung von 40 geht, meldet der Browser direkt, dass das Skript beschäftigt ist.

Da JavaScript in einem einzelnen Thread ausgeführt wird, kann der Browser während des Berechnungsprozesses der Sequenz keine anderen JavaScript-Skripte ausführen, und der UI-Rendering-Thread wird ebenfalls angehalten, wodurch der Browser in einen Zombie-Zustand wechselt. Wenn Sie einen Web-Worker verwenden, um den Berechnungsprozess der Sequenz in einen neuen Thread zu verschieben, können Sie diese Situation vermeiden. Sehen Sie sich das Beispiel konkret an:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. //fibonacci.js
2. varfibonacci =Funktion(n) {
3. zurück n
4. };   
5. onmessage =function(event) {
6. var n = parseInt(event."width: auto; height: auto; float: none;" id="16_nwp">"text-decoration: none;" mpid="16" target="_blank" ref="http://cpro.baidu .com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&p=baidu&q=0601. 1078_cpr&r b=0&rs=1&seller_id= 1&sid =45fdcf1cab219561&ssp2=1&time=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&url=0" id="16_nwl" >"color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data< ; /span, 10);   
7. postMessage(fibonacci(n));   
8. };  

　　HTML Open:fibonacci.html

XML/HTML-CodeInternationale Codekonfiguration

1. HTML>  
2. html>  
3. span Stil="width: auto; height: auto; float: none;" id="11_nwp">a Stil="text- Dekoration: keine; ="_blank" href="http://cpro.baidu.com/ cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0& rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="11_nwl">span Stil="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head span>a>span>>   meta http-equiv=
4. " Content-Type" content="text/html;  charset=utf-8"/>    Titel>Web-Worker-Fibonacci
5. Titel>  
6. Skript Typ="text/ span style="width: auto; Höhe: automatisch; float: none;" id="12_nwp"> a style="text-decoration: none;" mpid="12" Ziel="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=619521ab1ccffd45&k=javascript&k0=javascript&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&st id=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="12_nwl">< ;span style="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascriptspan>a>span>">  
7.   onload =Funktion(){   
8.       var worker =neu Worker('fibonacci.js');     
9.       worker.addEventListener('message', function(event) {   
10.         var timer2 = (new Date()).valueOf();   
11.            console.log( '结果：' event.span style ="width: auto; height: auto; float: none;" id="13_nwp" >a Stil=" text-decoration: none;" mpid="13" target="_blank" href="http://cpro.baidu. com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb =0&rs=1&seller_id=1&sid= 45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="13_nwl">span style= "color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">Datenspan>a> span>, '时间:'  timer2, '用时：'  ( timer2  - timer ) );   
12.       }, FALSCH);   
13.       var timer = (new Date()).valueOf();   
14.       console.log('开始计算：40','时间:'  timer );   
15.       setTimeout(function(){   
16.           console.log('定时器span style="width: auto; height: auto; float: none;" id="14_nwp" >a Stil="text-decoration : none;" mpid="14" Ziel="_blank" href="http://cpro.baidu.com/cpro /ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=����&k0=����&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs =1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="14_nwl">span Stil="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">函数span>a>span>在计算数列时执行了', '时间:'  (new Date()).valueOf( ) );   
17.       },1000);   
18.       worker.postMessage(40);   
19.       console.log('我在计算数列的时候执行了', '时间:'  (new Date()).valueOf() );   
20.   }     
21.   Skript>  
22. span style= "width: auto; height: auto; float: none;" id="15_nwp">a Stil="Text -decoration: none;" mpid="15" Ziel="_blank" href="http://cpro.baidu.com /cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb =0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2 =1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id= "15_nwl">span Stil="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">headspan>a>< ;/span>>  
23. Körper>  
24. Körper>  
25. html>  

　　在Chrome中打开fibonacci.html，控制台得到如下输出：
 
开始计算：40. 时间:1316508212705
我在计算数列的时候执行了 时间:1316508212734
定时器

XML/HTML-Code复制内容到剪贴板

1. span style="width: auto; height : auto; float: none;" id="9_nwp">a style="text-decoration: none;" mpid="9" Ziel=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id =0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=����&k0=����&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45f dcf1cab219561&ssp2=1&stid=0&t =tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id=" 9_nwl">span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">函数 span>a>span>  

在计算数列时执行了 时间:1316508213735
结果:102334155 时间:1316508262820 用时:50115

　　这个例子说明在worker中执行的fibonacci数列的计算并不会影响到主线程的代码执行，完全在自己独立的线程中计算，只是在计算完成之后将结果发回主线程.

　　利用web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的展示，并且不会弹出恶心的脚本正忙提示.

　　下面这个例子使用了web Arbeiter只计算一块像素值.

　　http://nerget.com/rayjs-mt/rayjs.html
　　三：Worker的其他尝试

　　我们已经知道Worker通过接收一个URL来创建一个worker，那么我们是否可以利用web. worker来做一些类似json p的请求呢,大家知道jsonp是通过插入script标签来加载json数据的,而script元素在加现异步加载将会非常不错.

　　下面这个例子将通过 web worker、jsonp、ajax三种不同的方式来加载一个169.42KB大小的JSON数据

 

JavaScript-Code复制内容到剪贴板

1. // /aj/webWorker/core.js   
2. Funktion $E(id) {   
3.     return document.getElementById(id);   
4. }   
5. onload =function() {   
6.     //通过web worker加载   
7.     $E('workerLoad').onclick =function() {   
8.         var url ='http://js.wcdn.cn/aj/mblog/face2' ;   
9.         var d = (new Date()).valueOf();   
10.         var worker =new Worker(url);   
11.         worker.onmessage =function(obj) {   
12.             console.log('web worker: '  ((new Date()).valueOf() - D));   
13.         };   
14.     };   
15.     //通过jsonp加载   
16.     $E('jsonpLoad').onclick =function() {   
17.         var url ='http://js.wcdn.cn/aj/mblog/face1' ;   
18.         var d = (new Date()).valueOf();   
19.         STK.core.io.scriptLoader({   
20.             Methode:'post',   
21.             URL : URL,   
22.             onComplete : function() {   
23.                 console.log('jsonp: '  ((new Date()).valueOf() - D));   
24.             }   
25.         });   
26.     };   
27.     //通过ajax加载   
28.     $E('ajaxLoad').onclick =function() {   
29.         var url ='http://js.wcdn.cn/aj/mblog/face' ;   
30.         var d = (new Date()).valueOf();   
31.         STK.core.io.ajax({   
32.             URL : URL,   
33.             onComplete : function(json) {   
34.                 console.log('ajax: '  ((new Date()).valueOf() - D));   
35.             }   
36.         });   
37.     };   
38. };  

　　HTML页面：/aj/webWorker/worker.html

 

XML/HTML-Code复制内容到剪贴板

1. HTML>  
2. html>  
3. span Stil="width: auto; height: auto; float: none;" id="4_nwp">a Stil="text- Dekoration: keine; ="_blank" href="http://cpro.baidu.com/ cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=head&k0=head&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0& rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="4_nwl">span Stil="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head span>a>span>>   meta http-equiv=
4. " Content-Type" content="text/html;  charset=utf-8"/>   
5. Titel>Worker-Beispiel: Last  span style="width: auto; height: auto; float: none;" id="5_nwp">a style="text-decoration: none;" mpid= "5" Ziel="_blank"  href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk =619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u192 2429&u=http://www.admin10000.com/document/1183.html&urlid=0 " id="5_nwl">span style="color:#0000ff;font-size:14px;width:auto;height:auto;float :none;">Datenspan>< ;/a>span> Titel>  
6. script src="http: //js.t.sinajs.cn/STK/js/gaea.1.14.js" type="text/< ;span style="width: auto; Höhe: automatisch; float: none;" id="6_nwp"> a style="text-decoration: none;" mpid="6" Ziel="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=619521ab1ccffd45&k=javascript&k0=javascript&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&st id=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="6_nwl">< ;span style="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">javascriptspan>a>span>">Skript>  
7. script type="text/ javascript" src="http://js.wcdn.cn/aj/webWorker/core.js" >Skript>  
8. Kopf>  
9. Körper>  
10.     Eingabe Typ="Schaltfläche"  id="workerLoad" Wert="web worker加载">Eingabe>  
11.     Eingabe Typ="Schaltfläche"  id="jsonpLoad" Wert="jsonp加载">Eingabe>  
12.     Eingabe Typ="Schaltfläche"  id="span style="width: auto; Höhe: automatisch; float: none;" id="7_nwp"> a style="text-decoration: none;" mpid="7" Ziel="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=619521ab1ccffd45&k=ajax&k0=ajax&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid =0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 1183.html&urlid=0" id="7_nwl">< ;span style="color:#0000ff;font-size:14px;width:auto; height:auto;float:none;">ajaxspan>a>span>Load" value="ajax加载">Eingabe>  
13. Körper>  
14. html>  

　　设置HOST
 

复制代码

代码如下:

127.0.0.1 js .wcdn.cn　

　　通过 http://js.wcdn.cn/aj/webWorker/worker.html 访问页面然后分别通过三种方式加载数据，得到控制台输出：
 

Après avoir essayé plusieurs fois, j'ai constaté que le temps de chargement des données via jsonp et ajax n'est pas très différent, et que le temps de chargement du Web Worker a toujours été à un niveau élevé, donc utiliser Web Worker pour charger des données est encore relativement lent, même avec de grandes quantités de données. Il n'y a aucun avantage. Il se peut que Worker prenne du temps pour initialiser de nouveaux threads. Il n’y a aucun avantage autre que d’être non bloquant lors du chargement.

Alors, Web Worker peut-il prendre en charge le chargement de js entre domaines ? Cette fois, nous accédons à la page via http://127.0.0.1/aj/webWorker/worker.html Lorsque nous cliquons sur le bouton de chargement "Web Worker Loading", Chrome le fera. télécharger Il n'y a pas de réponse et une erreur est affichée sous FF6. De là, nous pouvons savoir que Web Worker ne prend pas en charge le chargement inter-domaines de JS, ce qui est une mauvaise nouvelle pour les sites Web qui déploient des fichiers statiques sur un serveur statique distinct.

Ainsi, Web Worker ne peut être utilisé que pour charger des données JSON dans le même domaine, mais ajax peut déjà le faire, et il est plus efficace et polyvalent. Laissez le travailleur faire ce pour quoi il est bon.
Quatre : Résumé

Les travailleurs du Web ont l'air sympas, mais ils sont pleins de démons.

Ce que nous pouvons faire :

1. Vous pouvez charger un JS pour effectuer un grand nombre de calculs complexes sans suspendre le processus principal, et communiquer via postMessage, onmessage

2. Vous pouvez charger des fichiers de script supplémentaires dans le travailleur via importScripts(url)

　3. Vous pouvez utiliser setTimeout(), clearTimeout(), setInterval() et clearInterval()

4. Vous pouvez utiliser XMLHttpRequest pour envoyer des requêtes

5. Peut accéder à certaines propriétés du navigateur

Quelles sont les limites :

1. Impossible de charger JS sur plusieurs domaines

　2. Le code dans le travailleur ne peut pas accéder au DOM

3. L'implémentation de Worker dans différents navigateurs n'est pas cohérente. Par exemple, FF permet la création de nouveaux Workers dans Workers, mais Chrome ne le permet pas.

　4. Tous les navigateurs ne prennent pas en charge cette nouvelle fonctionnalité