Heim > Web-Frontend > js-Tutorial > So implementieren Sie Multithreading in Javascript

So implementieren Sie Multithreading in Javascript

醉折花枝作酒筹
Freigeben: 2023-01-07 11:44:10
Original
4145 Leute haben es durchsucht

In js können Sie die Worker-Klasse verwenden, um Multithreading zu implementieren. Das Syntaxformat lautet „var worker = new Worker (js-Dateipfad);“. Wenn Sie diese Klasse verwenden, wird ein neuer Thread vom Browser angefordert, der nur zum Ausführen einer JS-Datei verwendet wird.

So implementieren Sie Multithreading in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wir alle wissen, dass JS eine Single-Thread-Sprache ist. Sogar einige asynchrone Ereignisse werden im Hauptthread von JS ausgeführt (Einzelheiten zur Ausführung finden Sie in meinem anderen Blog über den JS-Code-Ausführungsmechanismus). Asynchrone Anforderungen wie setTimeout, Ajax oder einige Ereignisse von Dom-Elementen werden alle im JS-Hauptthread ausgeführt. Diese Vorgänge öffnen keine neuen Threads im Browser zur Ausführung, sondern werden nur dann in die Ereigniswarteschlange eingegeben, wenn diese asynchronen Vorgänge ausgeführt werden Es wird ausgelöst und beginnt dann mit der Ausführung im JS-Hauptthread.

Lassen Sie uns zunächst über die Browser-Threads sprechen. Zu den Haupt-Threads im Browser gehören der UI-Rendering-Thread, der JS-Haupt-Thread, der GUI-Ereignis-Trigger-Thread und der http-Anfrage-Thread.

Als Skriptsprache besteht der Hauptzweck von JS darin, mit Benutzern zu interagieren und das DOM zu bedienen. Dies legt fest, dass es nur Single-Threaded sein kann, da es sonst zu sehr komplexen Synchronisationsproblemen kommt. (Wir werden diese Probleme hier nicht untersuchen)

Aber Single-Thread-Sprachen haben eine sehr fatale Gewissheit. Wenn eine Skriptsprache ausgeführt wird und die Ausführung eines bestimmten Funktionsblocks viel Zeit in Anspruch nimmt, führt dies zu einer Blockierung. Bei einem solchen Projekt ist die Benutzererfahrung sehr schlecht, daher darf dieses Phänomen während des Entwicklungsprozesses des Projekts nicht auftreten.

Tatsächlich stellt uns JS eine Worker-Klasse zur Verfügung, mit der dieses Blockierungsphänomen gelöst wird. Wenn wir diese Klasse verwenden, wird sie vom Browser aus für einen neuen Thread beantragt. Dieser Thread wird nur zum Ausführen einer JS-Datei verwendet.

var worker = new Worker(js文件路径);
Nach dem Login kopieren

Dann gilt diese Anweisung für einen Thread zum Ausführen der js-Datei.

Natürlich gibt es im Hauptthread einige Methoden, um den neuen Thread zu steuern und Daten zu empfangen. Hier sprechen wir nur über einige der am häufigsten verwendeten Methoden.

//postMessage(msg);
//postMessage方法把在新线程执行的结果发送到浏览器的js引擎线程里
worker.onmessage = function(){
    //获取在新线程中执行的js文件发送的数据 用event.data接收数据
    console.log( event.data )
};
setTimeout( function(){
    worker.terminate();
    //terminate方法用于关闭worker线程
},2000)

setTimeout( function(){
    worker = new Worker("js/test22.js");
    //再次开启worker线程
},3000)
Nach dem Login kopieren

Verwenden Sie die postMessage()-Methode in einem neuen Thread, um einige Daten an den Hauptthread zu senden. Der Hauptthread verwendet das Onmessage-Ereignis des Workers, um die Daten zu empfangen und so die Multithread-Ausführung von js und den Datenaustausch zwischen mehreren zu realisieren Threads.

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Multithreading in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage