Neue HTML5-Funktionen Web Worker

1. Übersicht

JavaScriptDie Sprache verwendet einen einzelnen Thread Modell, das heißt, alle Aufgaben werden in einer Warteschlange angeordnet und es kann immer nur eine Sache gleichzeitig erledigt werden, was mit zunehmender Rechenleistung von Computern große Unannehmlichkeiten mit sich bringt . Das Potenzial von JavaScript kann nicht voll ausgeschöpft werden, wenn man bedenkt, dass die Datei API es JavaScript ermöglicht, eine Multithread-Umgebung für JavaScript zu erstellen Der Haupt-Thread weist den Unter-Thread einige Aufgaben zu, während der Haupt-Thread im Hintergrund ausgeführt wird, und die beiden stören sich nicht gegenseitig, bis der Unter-Thread die Berechnungsaufgabe abschließt und dann zurückkehrt Ergebnisse. Daher ist jeder Unterthread wie ein „Arbeiter“, der seine Arbeit stillschweigend erledigt:

Das Gleiche Domäneneinschränkung: Die vom Unterthread geladene Skriptdatei muss sich in derselben Domäne befinden wie die Skriptdatei des Hauptthreads. DOM-Einschränkung: Der Unterthread kann das DOM nicht lesen Das heißt, das Dokument, das Fenster und die übergeordneten Objekte können nicht vom untergeordneten Thread abgerufen werden. (Das Navigatorobjekt und das Standortobjekt können jedoch abgerufen werden.)

• Skripteinschränkung: Der untergeordnete Thread kann die globale Seite der Webseite nicht lesen. Variablen und Funktionen können die Warn- und Bestätigungsmethoden nicht ausführen, aber sie können setInterval und setTimeout ausführen und das XMLHttpRequest-Objekt verwenden, um AJAX-Anfragen zu stellen >

Dateibeschränkung: Untergeordnete Threads können keine lokalen Dateien lesen. Das heißt, der untergeordnete Thread kann das lokale Dateisystem (file://) nicht öffnen und das von ihm geladene Skript muss aus dem Netzwerk stammen.
Überprüfen Sie vor der Verwendung, ob der Browser diese API unterstützt. Zu den unterstützten Browsern gehören IE 10+, Firefox 3.6+, Safari 4.0+, Chrome und Opera 11, mobile Browser jedoch noch nicht unterstützt.

• 2. Untergeordnete Threads erstellen und starten
• Verwenden Sie im Hauptthread den Befehl

  new

  , um einen neuen Sub-Thread zu erstellen -thread. Der Parameter der

Worker-Methode ist eine Skriptdatei, die der Unterthread benötigt. Die abgeschlossene Aufgabe im obigen Code ist work.js Im lokalen Dateisystem muss die Skriptdatei von der Netzwerkseite stammen. Wenn der Download fehlschlägt, beispielsweise bei einem 404-Fehler, schlägt der untergeordnete Thread stillschweigend fehl.

if (window.Worker) {    // 支持} else {    // 不支持}

Nachdem der Unterthread erstellt wurde, muss er warten, bis der Hauptthread die postMessage-Methode aufruft, d. h. er wird erst gestartet, wenn ein Signal gesendet wird.

Die Parameter der postMessage-Methode sind die Signale, die vom Hauptthread an den untergeordneten Thread übergeben werden. Es kann entweder eine Zeichenfolge oder ein Objekt sein.

var worker = new Worker('work.js');

3.

Ereignis

Überwachung des Unterthreads

worker.postMessage('hello world');

Im Unterthread muss es eine

Rückruffunktion geben, um darauf zu warten Nachrichtenereignis.

worker.postMessage({method: 'each', args: ['work']});

self stellt den Sub-Thread selbst dar, und self.addEventListener stellt die Angabe einer Rückruffunktion für das Nachrichtenereignis des Sub-Threads dar (Sie können den Wert des onmessage

-Attributs auch direkt angeben ). Der Parameter der Callback-Funktion

ist ein Ereignisobjekt und sein Datenattribut enthält das vom Hauptthread gesendete Signal. self.postMessage bedeutet, dass der untergeordnete Thread ein Signal an den Hauptthread sendet.

Je nach unterschiedlichen Signalwerten, die vom Hauptthread gesendet werden, kann der Unterthread unterschiedliche Methoden aufrufen.

//File: work.jsself.addEventListener('message', function(e) {

    self.postMessage('You said: ' + e.data);

}, false);

4. Ereignisüberwachung des Hauptthreads

Der Hauptthread muss auch eine Rückruffunktion für das Nachrichtenereignis angeben, um auf vom untergeordneten Thread gesendete Signale zu warten. 5.

Fehlerbehandlung

'message',  method = args = reply =);

Der Hauptthread kann überwachen, ob im untergeordneten Thread ein Fehler auftritt. Tritt ein Fehler auf, wird das Fehlerereignis des Hauptthreads ausgelöst.

6. Schließen Sie den untergeordneten Thread

// File: main.jsworker.addEventListener('message', function(e) {
    console.log(e.data);
}, false);

Um Systemressourcen zu sparen, müssen wir nach der Verwendung die Terminate-Methode im Hauptthread aufrufen, um den untergeordneten Thread manuell zu schließen.

Sie können sich auch intern im untergeordneten Thread schließen.

7. Datenkommunikation zwischen dem Haupt-Thread und den Sub-Threads

worker.onerror(function(e) {
    console.log(e);
});// orworker.addEventListener('error', function(e) {
    console.log(e);
}, false);

Der Kommunikationsinhalt zwischen dem Haupt-Thread und den Sub-Threads kann Text oder Objekte sein. Es ist zu beachten, dass es sich bei dieser Kommunikation um eine Kopierbeziehung handelt, d. h.

übergibt den Wert

anstelle der Adresse. Änderungen des Kommunikationsinhalts durch den Unter-Thread haben keine Auswirkungen auf den Haupt-Thread. Tatsächlich besteht der interne Betriebsmechanismus des Browsers darin, zuerst den Kommunikationsinhalt zu serialisieren und dann die serialisierte Zeichenfolge an den untergeordneten Thread zu senden, der sie dann wiederherstellt.

worker.terminate();

Der Haupt-Thread und der Sub-Thread können auch Binärdaten wie Dateien, Blobs,

Arrays

Puffer und andere Objekte austauschen, die auch zwischen Threads gesendet werden können.

self.close();

但是，用拷贝方式发送二进制数据，会造成性能问题。比如，主线程向子线程发送一个500MB文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。

如果要使用该方法，postMessage方法的最后一个参数必须是一个数组，用来指定前面发送的哪些值可以被转移给子线程。

worker.postMessage(arrayBuffer, [arrayBuffer]);

8、同页面的Web Worker

通常情况下，子线程载入的是一个单独的JavaScript文件，但是也可以载入与主线程在同一个网页的代码。假设网页代码如下：

<!DOCTYPE html>
    <body>
        <script id="worker" type="app/worker">

            addEventListener(&#39;message&#39;, function() {
                postMessage(&#39;Im reading Tech.pro&#39;);
            }, false);        </script>
    </body></html>

我们可以读取页面的script，用worker来处理。

var blob = new Blob([document.querySelector('#workere').textContent]);

这里需要把代码当作二进制数据读取，所以使用Blob接口。然后，这个二进制对象转为URL，再通过这个URL创建worker。

var url = window.URL.createObjectURL(blob);var worker = new Worker(url);

部署事件监听代码。

worker.addEventListener('message', function(e) {
    console.log(e.data);
}, false);

最后启动worker。

worker.postMessage('');

整个页面的代码如下：

    
        

        <script>
            (function() {                
            var blob = new Blob([document.querySelector(&#39;#worker&#39;).textContent]);                
            var url = window.URL.createObjectURL(blob);                
            var worker = new Worker(url);

                worker.addEventListener(&#39;message&#39;, function(e) {
                    console.log(e.data);
                }, false);

                worker.postMessage(&amp;#39;&amp;#39;);
            })();        </script>
    

可以看到，主线程和子线程的代码都在同一个网页上面。

上面所讲的Web Worker都是专属于某个网页的，当该网页关闭，worker就自动结束。除此之外，还有一种共享式的Web Worker，允许多个浏览器窗口共享同一个worker，只有当所有窗口关闭，它才会结束。这种共享式的Worker用SharedWorker对象来创建，因为适用场合不多，这里就省略了。

Das obige ist der detaillierte Inhalt vonNeue HTML5-Funktionen Web Worker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!