Dieser Artikel bietet Ihnen eine Einführung in HTML5 Web Worker (mit Beispielen). Freunde in Not können darauf verweisen.
Web Worker im Browser
Einführung in den Hintergrund
Wir alle wissen, dass die JavaScript-Sprache in einem einzelnen Thread ausgeführt wird, also gleichzeitig Es kann Führen Sie nur eine Sache aus, die viel mit dieser Sprache zu tun hat. Wenn eine Blockierung auftritt, wird der nachfolgende Code nicht vom Web-Worker-Standard ausgeführt, was bedeutet, dass mehrere Threads zulässig sind. Die Sub-Threads werden jedoch vollständig vom Haupt-Thread gesteuert. Nur der Haupt-Thread kann das DOM bedienen. Daher ist der Haupt-Thread der Haupt-Thread Kern der JavaScript-Sprache.
Der Unterschied zwischen Prozess und Thread
Grundlegender Unterschied: Der Prozess ist die Grundeinheit der Ressourcenzuweisung des Betriebssystems, während der Thread die Grundeinheit der Aufgabenplanung und -ausführung ist.
Im Betriebssystem können mehrere Prozesse (Programme) gleichzeitig ausgeführt werden und im selben Prozess (Programm) können mehrere Threads gleichzeitig ausgeführt werden.
Kompatibilität
Um es einfach auszudrücken: Es basiert tatsächlich auf der Single-Thread-Ausführung von Javascript und startet einen Sub-Thread für die Programmverarbeitung, ohne die Ausführung des Haupt-Threads zu beeinträchtigen Kehrt zum Hauptthread zurück. In diesem Prozess hat es keinen Einfluss auf den Ausführungsprozess des Hauptthreads.
Zum Beispiel
Traditionell wird nach der Ausführung des folgenden Codes die gesamte Seite eingefroren. Da JavaScript Single-Threaded ist, hat der folgende Code die nachfolgende Ausführung vollständig blockiert
while(1){}
Wenn wir die Methode ändern, einen neuen Thread starten, um diesen Code auszuführen, ihn in eine separate worker.js-Datei einfügen und den folgenden Code im Hauptthread ausführen, können wir diese Situation vermeiden.
var worker = new Worker("worker.js")
Verwendung von Web Worker
Bestimmen Sie, ob der aktuelle Browser Web Worker unterstützt
if (typeof (Worker) != "undefined") { //浏览器支持web worker if (typeof (w) == "undefined") { //w是未定义的,还没有开始计数 w = new Worker("webworker.js"); //创建一个Worker对象,利用Worker的构造函数 } //onmessage是Worker对象的properties w.onmessage = function (event) { //事件处理函数,用来处理后端的web worker传递过来的消息 // do something }; } else { // 浏览器不支持web worker // do something }
①Erstellen Sie einen neuen Worker
var worker = new Worker("worker.js")
②Pass -Parameter
worker.postMessage()
③Receice Message
worker.onMessage = function(msg){}
④Exception Handhabung
worker.onerror = function(err){}
⑤end Worker
worker.terminate()
⑥ load class klassenfunktion
importScripts()
var worker = new SharedWorker("sharedworker.js");
Datentyp-Speicherprinzipien und Übertragungsregeln in JavaScript
Gemeinsamer Thread (SharedWorker)
Gemeinsamer Thread SharedWorker kann Thread-Links für mehrere Seiten gleichzeitig haben.
Um SharedWorker zum Erstellen eines freigegebenen Threads zu verwenden, müssen Sie auch die URL-Adresse oder den Blob einer Javascript-Skriptdatei angeben. Die Skriptdatei enthält den Code, den wir im Thread ausführen müssen, wie folgt:worker.port.onmessage = function(msg){};
worker.port.postMessage(msg);
worker.port.postMessage(msg);
①当一个web worker的文档列表不为空的时候,这个web worker会被称之为许可线程。
②当一个web worker的文档列表中的任何一个对象都是处于完全活动状态的时候,这个web worker会被称之为需要激活线程。
③当一个web worker是许可线程并且拥有计数器或者拥有数据库事务或者拥有网络连接或者它的web worker列表不为空的时候,这个web worker会被称之为受保护的线程。
④当一个web worker是一个非需要激活线程同时又是一个许可线程的时候,这个web worker会被称之为可挂起线程。
1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性
1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性
Das obige ist der detaillierte Inhalt vonEinführung in HTML5 Web Worker (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!