HTML5: web socket and web worker, html5worker

HTML5: web socket and web worker, html5worker

I encountered a multiple-choice question during the exercise. It was about web worker. Could web worker affect page performance? After tutoring, the answer is no effect.

I checked the relevant materials to learn about web worker and encountered web socket. I sorted it out as follows:

The role of web socket and worker: provides a new reference solution for building highly efficient web applications.

Web socket provides more efficient transmission protocols, and web worker provides multithreading to improve the computing efficiency of web applications.

I. web socket

1. web socket is a protocol, essentially the same as http and tcp. The protocol is used to explain how data is transmitted. I wrote a small online chat using socket. io, and then summarized this project.

2. There are two web socket prefixes: (1) ws: // they are not encrypted. (2) wss: // is encrypted.

3. The web socket interaction between the client and the server can also be understood as "http handshake + tcp Data Transmission:

(1) A browser (a browser supporting Websocket) initiates a request like HTTP and waits for the response from the server;

(2) The server returns a handshake response, telling the browser to pass the subsequent data in the format specified by websocket;

(3) The socket connection between the browser and the server is not interrupted. In this case, the connection is duplex instead of http;

(4) use this persistent connection for data transmission when the browser and the server have any data to transmit.

Note:HTTP handshake:The reason is that the browser and the server send requests, Request headers, Response, and Response Headers in the process of establishing a persistent connection handshake according to HTTP1.1. However, the difference is that the fields in the Header have specific meanings.

TCP transmission:It is mainly reflected in that after a persistent connection is established, the browser can send data to the server, and the server can also send requests to the browser. Of course, its data format is not defined by itself. It is in the outer layer of the data to be transmitted, which is defined by the ws protocol.

4. data transmission process:Websocket Data TransmissionYes: frame. For example, a message is divided into several frames and transmitted sequentially. There are several benefits to doing so:

(1) big data transmission can be performed in multiple parts without considering the insufficient length flag space caused by the data size.

(2) Like the chunk of http, messages can be transmitted while generating data, which improves transmission efficiency.

5. The client uses the web socket Syntax: JavaScript.

Server: supports multiple web frameworks.

Ii. web worker

1. When a script is executed on an HTML page, the page status does not respond until the script is complete.

Web worker is the JavaScript running in the background, independent of other scripts, and does not affect the page performance. You can continue to do anything you want: Click, select content, and so on. At this time, web worker runs in the background.

Apart from DOM operationsTheoretically, any JS script task can be executed in worker. The syntax limit isCannot access JS across regions. Worker is often used for complex computing that requires a lot of time and CPU resources, in exchange for the friendly operation of foreground users. In other words, from the perspective of user experience,Improved service performance.

2. web worker usage: (After we create a web worker object, it will continue to listen to messages (even after the external script is complete) until it is terminated .)

(1) Add an "onmessage" event listener to the web worker to obtain the received message.

Send message: postMessage ()

Terminate web worker and release Browser/computer resources: terminate ()

1 var worker = new Worker ("worker_job.js"); // create a Worker object and pass it the URL2 3 worker of the script to be executed in the new thread. postMessage ("hello world"); // send data to worker 4 5 worker. onmessage = function (evt) {// receives data function 6 from worker. log (evt. data); // output the data sent by the worker 7}

(2) Add an event listener to process the message, and communicate with the main thread through the self. function within the worker:

1 self.addEventListener('message', function(e) {2     var data = e.data;3     if(data == 'init')4         init();5     else6         ...7 }, false);8 9 self.postMessage("hello worker");

If any error occurs, please correct it!

 

Reference:

Basic Principles and usage of web socket and web worker

Chunk encoding for HTTP (multipart Transfer Encoding)

Performance Comparison of seven web socket frameworks