HTML5: Web-Socket und Web-Worker-H5-Tutorial-php.cn

HTML5: Web-Socket und Web-Worker

高洛峰

Freigeben： 2016-10-17 09:52:48

Original

1518 Leute haben es durchsucht

Während der Übung bin ich auf eine Multiple-Choice-Frage zu Web-Workern gestoßen. Werden Web-Worker die Seitenleistung beeinflussen? Nach der Nachhilfe lautet die Antwort: Es wird keinen Einfluss darauf haben.

Ich habe relevante Informationen konsultiert, um mehr über Web-Worker zu erfahren, und bin auf Web-Sockets gestoßen. Die Zusammenfassung lautet wie folgt:

Die Rolle von Web-Sockets und Workern: Bietet eine neue Referenzlösung für den Aufbau hoch-. leistungsstarke Webanwendungen.

Web Socket bietet ein effizienteres Übertragungsprotokoll und Web Worker bietet Multithreading, um die Recheneffizienz von Webanwendungen zu verbessern.

1. Web-Socket

1. Web-Socket ist im Wesentlichen dasselbe wie http und TCP. Das Protokoll wird verwendet, um zu beschreiben, wie Daten übertragen werden. Ich habe einen kleinen Online-Chat mit socket.io geschrieben und dann das Projekt zusammengefasst.

2. Es gibt zwei Präfixe für Web-Socket: (1) ws:// ist nicht verschlüsselt. (2)wss:// ist verschlüsselt.

3. Die Art und Weise, wie Client und Server mit Web-Sockets interagieren, kann auch als „HTTP-Handshake-TCP-Datenübertragungsmethode“ verstanden werden:

(1) Browser (Browser, der Websocket unterstützt) Wie HTTP, initiieren Sie eine Anfrage und warten Sie dann auf die Antwort vom Server. (2) Der Server gibt eine Handshake-Antwort zurück und weist den Browser an, nachfolgende Daten gemäß dem vom Websocket angegebenen Datenformat zu übertragen

(3) Die Socket-Verbindung zwischen dem Browser und dem Server wird nicht unterbrochen. Der Unterschied zwischen dieser Verbindung und http besteht darin, dass sie duplex ist.

(4) Der Browser und der Server verfügen über keine Daten übertragen werden muss. Nutzen Sie diese lange Verbindung zur Datenübertragung.

Hinweis: HTTP-Handshake: Dies liegt daran, dass der Handshake-Prozess zwischen dem Browser und dem Server beim Aufbau einer langen Verbindung gemäß dem HTTP1.1-Protokoll gesendet wird, einschließlich Anforderung, Anforderungsheader, Antwort und Antwortheader. Der Unterschied besteht jedoch darin, dass die Felder im Header bestimmte Bedeutungen haben.

TCP-Übertragung: Dies spiegelt sich hauptsächlich darin wider, dass der Browser nach dem Aufbau einer langen Verbindung Daten an den Server senden kann und der Server auch Anfragen an den Browser senden kann. Natürlich ist das Datenformat nicht selbst definiert. Auf der äußeren Schicht der zu übertragenden Daten gibt es ein äußeres Paket.

4. Datenübertragungsprozess: Die Datenübertragungsform von WebSocket ist: Frame. Beispielsweise wird eine Nachricht in mehrere Frames unterteilt und nacheinander übertragen. Dies hat mehrere Vorteile:

(1) Die Übertragung großer Datenmengen kann in Fragmenten übertragen werden, ohne dass das durch die Datengröße verursachte Flag für unzureichende Länge berücksichtigt wird.

(2) Wie bei einem HTTP-Block können Nachrichten übertragen und gleichzeitig Daten generiert werden, was die Übertragungseffizienz verbessert.

5. Der Client verwendet Web-Socket-Syntax: JavaScript.

Server: unterstützt mehrere Web-Frameworks.

2. Web-Worker

1. Beim Ausführen eines Skripts in einer HTML-Seite ist der Status der Seite nicht reaktionsfähig, bis das Skript abgeschlossen ist.

Der Web-Worker ist JavaScript, das im Hintergrund unabhängig von anderen Skripten ausgeführt wird und die Leistung der Seite nicht beeinträchtigt. Sie können weiterhin tun, was Sie wollen: Klicken, Auswählen usw., während der Web-Worker im Hintergrund ausgeführt wird.

Zusätzlich zu DOM-Operationen kann theoretisch jede JS-Skriptaufgabe zur Ausführung in den Worker gestellt werden; die syntaktische Einschränkung besteht darin, dass auf JS nicht domänenübergreifend zugegriffen werden kann. Worker werden häufig für komplexe Berechnungen eingesetzt, die viel Zeit und CPU-Ressourcen erfordern, um den Front-End-Benutzerbetrieb benutzerfreundlicher zu gestalten, d. h. aus Sicht des Benutzererlebnisses wird die Serviceleistung verbessert.

2. Web-Worker-Nutzung: (Wenn wir das Web-Worker-Objekt erstellen, wartet es weiterhin auf Nachrichten (auch nach Abschluss des externen Skripts), bis es beendet wird.)

( 1) Erhalten Sie empfangene Nachrichten, indem Sie dem Web Worker einen „onmessage“-Ereignis-Listener hinzufügen.

Eine Nachricht senden: postMessage()

Beenden Sie den Web Worker und geben Sie Browser-/Computerressourcen frei:terminate()

(2) Durch Hinzufügen eines Ereignis-Listeners Um die Nachricht zu verarbeiten, kommunizieren Sie mit dem Hauptthread über die Funktion self

HTTP-Protokoll-Chunk-Codierung (Chunk-Transfer-Codierung)

var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL

 worker.postMessage("hello world");     //向worker发送数据
 
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }

Nach dem Login kopieren

Leistungsvergleich von sieben Web-Socket-Frameworks

self.addEventListener(&#39;message&#39;, function(e) {
    var data = e.data;
    if(data == &#39;init&#39;)
        init();
    else
        ...
}, false);

self.postMessage("hello worker");

Nach dem Login kopieren