Heim > Artikel > Web-Frontend > Beispiel-Tutorial zur Verwendung von HTML5 Web Worker

Beispiel-Tutorial zur Verwendung von HTML5 Web Worker

小云云Original: 2018-01-08 11:20:411569Durchsuche

Web Worker ist eine von HTML5 bereitgestellte Javascript-Multithreading-Lösung. Wir können einige rechenintensive Codes für den Web Worker ausführen, ohne die Benutzeroberfläche einzufrieren. In diesem Artikel wird hauptsächlich die Verwendung von HTML5 Web Worker vorgestellt. Der Herausgeber findet ihn recht gut. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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 und zu öffnen ein neuer ThreadErzielt den Effekt einer nicht blockierenden Ausführung und stellt eine Schnittstelle für den Datenaustausch zwischen dem Hauptthread und dem neuen Thread bereit: postMessage, onmessage.

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

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

HTML-Seite: test.html

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
 worker.postMessage("hello world");     //向worker发送数据
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }
 </script>
 </head>
 <body></body>
</html>

Nach dem Öffnen von test.html mit dem Chrome-Browser zeigt die Konsolenausgabe „Hallo Welt“ 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 einen Through Worker = New Worker( URL ) JS-Datei, 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.

Neuer Worker-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 Worker tun?

Da wir nun wissen, wie Web Worker verwendet wird, welchen Nutzen er hat und ob er uns bei der Lösung dieser Probleme helfen kann. Schauen wir uns ein Beispiel der Fibonacci-Folge an.

Jeder weiß, dass in der Mathematik die Fibonacci-Folge 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:

var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
//fibonacci(36)

Bei Verwendung dieser Methode in Chrome zur Ausführung der 39 Fibonacci-Sequenz beträgt die Ausführungszeit 19097 Millisekunden und bis When Bei der Berechnung von 40 meldet der Browser direkt, dass das Skript beschäftigt ist.

Da JavaScript in einem einzelnen Thread ausgeführt wird, kann der Browser beim Finden 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:

//fibonacci.js
var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
onmessage =function(event) {
    var n = parseInt(event.data, 10);
    postMessage(fibonacci(n));
};

HTML-Seite: fibonacci.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>web worker fibonacci</title>
<script type="text/javascript">
  onload =function(){
      var worker =new Worker(&#39;fibonacci.js&#39;);  
      worker.addEventListener(&#39;message&#39;, function(event) {
        var timer2 = (new Date()).valueOf();
           console.log( &#39;结果：&#39;+event.data, &#39;时间:&#39;+ timer2, &#39;用时：&#39;+ ( timer2  - timer ) );
      }, false);
      var timer = (new Date()).valueOf();
      console.log(&#39;开始计算：40&#39;,&#39;时间:&#39;+ timer );
      setTimeout(function(){
          console.log(&#39;定时器函数在计算数列时执行了&#39;, &#39;时间:&#39;+ (new Date()).valueOf() );
      },1000);
      worker.postMessage(40);
      console.log(&#39;我在计算数列的时候执行了&#39;, &#39;时间:&#39;+ (new Date()).valueOf() );
  }  
  </script>
</head>
<body>
</body>
</html>

In Chrome öffnen fibonacci.html, die Konsole erhält die folgende Ausgabe:

Berechnung starten: 40 Zeit: 1316508212705
Ich habe die Zeit bei der Berechnung der Sequenz ausgeführt: 1316508212734
Die Timer-Funktion hat die Zeit bei der Berechnung der Sequenz ausgeführt ; Berechnung, senden Sie die Ergebnisse einfach an den Hauptthread zurück, nachdem die Berechnung abgeschlossen ist.

Mithilfe von Web Workern können wir einige komplexe und umfangreiche Vorgänge im Frontend ausführen, ohne die Anzeige der Seite zu beeinträchtigen, und die ekelhafte Skript-Beschäftigt-Eingabeaufforderung wird nicht angezeigt.

Das folgende Beispiel verwendet einen Web-Worker, um die Pixel in der Szene zu berechnen. Wenn die Szene geöffnet wird, wird sie einzeln gezeichnet und ein Worker berechnet nur einen Pixelwert.

Drei: Andere Versuche von Worker

Wir wissen bereits, dass Worker einen Worker erstellt, indem er eine URL erhält. Können wir also den Web-Worker verwenden, um so etwas wie jsonp zu tun? Bei Anfragen weiß jeder, dass JSONP JSON-Daten durch Einfügen von Skript-Tags lädt und Skriptelemente beim Laden und Ausführen blockieren. Es wäre sehr gut, wenn Web-Worker zum Implementieren des asynchronen Ladens verwendet werden könnten.

Das folgende Beispiel lädt 169,42 KB große JSON-Daten über drei verschiedene Methoden: Web Worker, JSONP und Ajax

HTML-Seite: / aj/webWorker/worker.html

// /aj/webWorker/core.js
function $E(id) {
    return document.getElementById(id);
}
onload =function() {
    //通过web worker加载
    $E(&#39;workerLoad&#39;).onclick =function() {
        var url =&#39;http://js.wcdn.cn/aj/mblog/face2&#39;;
        var d = (new Date()).valueOf();
        var worker =new Worker(url);
        worker.onmessage =function(obj) {
            console.log(&#39;web worker: &#39;+ ((new Date()).valueOf() - d));
        };
    };
    //通过jsonp加载
    $E(&#39;jsonpLoad&#39;).onclick =function() {
        var url =&#39;http://js.wcdn.cn/aj/mblog/face1&#39;;
        var d = (new Date()).valueOf();
        STK.core.io.scriptLoader({
            method:&#39;post&#39;,
            url : url,
            onComplete : function() {
                console.log(&#39;jsonp: &#39;+ ((new Date()).valueOf() - d));
            }
        });
    };
    //通过ajax加载
    $E(&#39;ajaxLoad&#39;).onclick =function() {
        var url =&#39;http://js.wcdn.cn/aj/mblog/face&#39;;
        var d = (new Date()).valueOf();
        STK.core.io.ajax({
            url : url,
            onComplete : function(json) {
                console.log(&#39;ajax: &#39;+ ((new Date()).valueOf() - d));
            }
        });
    };
};

HOST festlegen

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Worker example: load data</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>
    <input type="button" id="workerLoad" value="web worker加载"></input>
    <input type="button" id="jsonpLoad" value="jsonp加载"></input>
    <input type="button" id="ajaxLoad" value="ajax加载"></input>
</body>
</html>

127.0.0.1 js.wcdn.cn

Auf die Seite zugreifen über http://js.wcdn.cn/aj/webWorker/worker.html und laden Sie die Daten dann auf drei Arten, um die Konsolenausgabe zu erhalten:

Nachdem ich es mehrmals versucht hatte, stellte ich fest, dass der Zeitunterschied zwischen dem Laden von Daten über JSONP und Ajax nicht viel unterschiedlich ist, während die Ladezeit von Web Worker immer auf einem hohen Niveau war, sodass die Verwendung von Web Worker zum Laden von Daten immer noch relativ langsam ist. Selbst bei großen Datenmengen kann es von Vorteil sein, dass Worker Zeit braucht, um neue Threads zu initialisieren. Es gibt keinen anderen Vorteil als die Nichtblockierung beim Laden.

web worker: 174
jsonp: 25
ajax: 38

Kann Web Worker das domänenübergreifende Laden von JS unterstützen? Dieses Mal greifen wir auf die Seite über http://127.0.0.1/aj/webWorker/worker.html zu, wenn wir auf die Ladeschaltfläche „Web Worker Loading“ klicken Unter Chrome erfolgt keine Reaktion und unter FF6 wird ein Fehler angezeigt. Daraus können wir erkennen, dass Web Worker das domänenübergreifende Laden von JS nicht unterstützt, was eine schlechte Nachricht für Websites ist, die statische Dateien auf einem separaten statischen Server bereitstellen.

Web Worker kann also nur zum Laden von JSON-Daten in derselben Domäne verwendet werden, Ajax kann dies jedoch bereits und ist effizienter und vielseitiger. Lassen Sie den Arbeiter tun, was er gut kann.

Viertens: Zusammenfassung

Web Worker sieht wunderschön aus, ist aber voller Teufel.

Was wir tun können:

1. Kann einen JS laden, um eine große Anzahl komplexer Berechnungen durchzuführen, ohne den Hauptprozess hängen zu lassen, und über postMessage und onmessage kommunizieren

2 . Sie können über importScripts(url) zusätzliche Skriptdateien in den Worker laden.

3 Sie können setTimeout(), clearTimeout(), setInterval() und clearInterval() verwenden. Sie können XMLHttpRequest verwenden, um Anfragen zu senden

5. Kann auf einige Eigenschaften des Navigators zugreifen

Was sind die Einschränkungen:

1. JS kann nicht domänenübergreifend geladen werden

2. Der Code innerhalb des Workers kann nicht auf das DOM zugreifen

3 Die Implementierung von Worker durch verschiedene Browser ist inkonsistent. Beispielsweise lässt FF die Erstellung neuer Worker in Workern zu.

4. Nein. Jeder Browser unterstützt diese neue Funktion

Verwandte Empfehlungen:

So implementieren Sie Multithreading in H5 Web Worker

WebWorkers-Front-End-Hochleistungsrechnen

PHP-Socket-Server-Framework-Workerman

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Verwendung von HTML5 Web Worker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS verfügt über ein tiefes Verständnis für das Teilen von width:auto-NutzungsbeispielenNächster Artikel：CSS verfügt über ein tiefes Verständnis für das Teilen von width:auto-Nutzungsbeispielen

In Verbindung stehende Artikel

Mehr sehen