HTML5：web socket 和 web worker

During the exercise, I encountered a multiple-choice question about web workers. Will web workers affect page performance? After tutoring, the answer is that it will not affect it.

I consulted relevant information to learn about web workers, and encountered web sockets. The summary is as follows:

The functions of web sockets and workers: provide a new reference solution for building high-performance web applications.

Web socket provides a more efficient transmission protocol, and web worker provides multi-threading to improve the computing efficiency of web applications.

一.web socket

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

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

3. The way the client and server interact with web sockets can also be understood as the "http handshake + tcp data transmission" method:

(1) The browser (a browser that supports Websocket) initiates a request, and then wait for the response from the server;

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

(3) The socket connection between the browser and the server is not interrupted, At this time, the difference between this connection and http is that it is duplex;

(4) When the browser and server have any data that needs to be transferred, use this long connection for data transfer.

Note: HTTP handshake: This is because the handshake process between the browser and the server when establishing a long connection is sent according to the HTTP1.1 protocol, including Request, Request Header, Response, and Response Header. But the difference is that the fields in the Header have specific meanings.

TCP transmission: Mainly reflected in the fact that after establishing a long connection, 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. There is an outer packet specified by the ws protocol on the outer layer of the data to be transmitted.

4. Data transmission process: The data transmission form of websocket is: frame. For example, a message will be divided into several frames and transmitted in order. This will have several benefits:

(1) The transmission of large data can be transmitted in fragments, without taking into account the insufficient length flag caused by the size of the data.

(2) Like HTTP chunk, messages can be generated while transmitting data, which improves transmission efficiency.

5. The client uses web socket syntax: JavaScript.

Server: Supports multiple web frameworks.

二.web worker

1. When executing a script in an HTML page, the state of the page is unresponsive until the script has completed.

The web worker is JavaScript running in the background, independent of other scripts and will not affect the performance of the page. You can continue to do whatever you want: click, select, etc. while the web worker runs in the background.

In addition to DOM operations, theoretically any JS script task can be put into the worker for execution; the syntactic limitation is that JS cannot be accessed across domains. Workers are often used for complex calculations that require a lot of time and CPU resources in order to make front-end user operations more friendly; in other words, from the perspective of user experience, service performance is improved.

2. Web worker usage: (When we create the web worker object, it will continue to listen for messages (even after the external script is completed) until it is terminated.)

(1) By adding an "onmessage" to the web worker "Event listener to get the received message.

　Send a message: postMessage()

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

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

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

(2) Process the message by adding an event listener, and communicate with the main function through the self. function inside the worker Thread communication:

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

self.postMessage("hello worker");

Reference documents:

Basic principles and usage of web socket and web worker

HTTP protocol chunk encoding (chunked transfer encoding)

Performance comparison of seven web socket frameworks