Dieser Artikel bietet Ihnen eine detaillierte Einführung in Web Worker in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Einführung

Web Worker bieten eine einfache Möglichkeit, Skripte in einem Hintergrundthread für Webinhalte auszuführen. Threads können Aufgaben ausführen, ohne die Benutzeroberfläche zu beeinträchtigen. Darüber hinaus können sie E/A mithilfe von XMLHttpRequest durchführen (obwohl die Attribute „responseXML“ und „channel“ immer leer sind). Nach der Erstellung kann ein Worker Nachrichten an den JavaScript-Code senden, der sie erstellt hat, indem er die Nachricht an den durch diesen Code angegebenen Ereignishandler veröffentlicht (und umgekehrt).

Wichtige Punkte für die Verwendung von Web Worker

• Beschränkung auf den gleichen Ursprung: Die dem Worker-Thread zugewiesene Skriptdatei muss denselben Ursprung haben wie die Skriptdatei des Hauptthreads.

• DOM-Einschränkung: Das globale Objekt, in dem sich der Worker-Thread befindet, unterscheidet sich vom Haupt-Thread. Es kann das DOM-Objekt der Webseite, auf der sich der Haupt-Thread befindet, nicht lesen Verwenden Sie Dokument-, Fenster- und übergeordnete Objekte. Worker-Threads können jedoch durch Navigatorobjekte und Standortobjekte navigieren.

• Kommunikation: Der Worker-Thread und der Haupt-Thread befinden sich nicht im selben Kontext, sie können nicht direkt kommunizieren und müssen über Nachrichten vervollständigt werden.

• Skripteinschränkung: Der Arbeitsthread kann die Methoden „alert()“ und „confirm()“ nicht ausführen, kann aber das XMLHttpRequest-Objekt verwenden, um eine AJAX-Anfrage auszugeben.

• Dateieinschränkungen: Der Worker-Thread kann keine lokalen Dateien lesen, d. h. er kann das lokale Dateisystem (file://) nicht öffnen. Das von ihm geladene Skript muss aus dem Netzwerk stammen. Wir werden uns später damit befassen.

HTTP-Server installieren

Der Worker-Thread kann keine lokalen Dateien lesen, d. h. er kann das lokale Dateisystem (file://) und das Skript nicht öffnen es lädt, muss aus dem Internet kommen. So können wir uns ein Projekt leisten. Es ist am einfachsten zu verwenden http-server
Installation:

> cnpm i -g http-server

Verwendung:

> http-server

Grundlegende Verwendung

Wir erstellen einen neuen Ordner mit dem Namen worker und erstellen drei neue darin Die Dateien sind

index.html
main.js
worker.js

Das Erstellen eines worker Threads ist sehr einfach, einfach:

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

main.js:

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    // 发送数据事件
    postMessage('Hello, I am from Worker.js');
}

Geben Sie im Worker-Ordner http-server in die Befehlszeile ein, starten Sie das Projekt, öffnen Sie es mit einem Browser und schauen Sie auf die Konsole:

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

Wie Sie oben sehen können, worker überwacht Daten über onmessage, sendet Daten über postMessgae

Arbeiter beenden

worker.terminate();

Fehler behandeln

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

• event.filename: Der Name des Worker-Skripts, das den Fehler verursacht hat;

• event.message: falsche Nachricht;

• event.lineno: falsche Zeilennummer;

Externes Skript laden

main.js

var worker = new Worker('./worker1.js');

worker1.js

console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
// 或者
// importScripts('worker2.js');
// importScripts('worker3.js');

worker2.js

console.log("I'm worker2")

worker3.js

console.log("I'm worker3")

Kompatibilität

https://caniuse.com/#feat=webworkers
Die Kompatibilität ist nicht sehr optimistisch, aber die Kompatibilität auf dem mobilen Endgerät ist ziemlich gut

Verwandte Empfehlungen:

Forschung zur Web-Worker-Multithreading-API in JavaScript_Javascript-Fähigkeiten

Detaillierte Einführung in Klassen (Klasse ) in JavaScript_Javascript-Kenntnissen

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Web Worker in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!