Public account: wechat search front end tool person; Take more dry goods

JS single-threaded

1.1 what iswebworker?

Web Workers provide a way for Web applications to run in the background. Through Web Worker, multiple threads can be generated to run at the same time, and timely response of the page to the user can be guaranteed without affecting the normal operation of the user.

1.2 single thread

  • Single thread in program execution, the path of the program in sequential order, the first must be processed before the next can be executed.
  • Simply put, it is a chain of tasks that processes transactions. When there is only one chain and everything is executed on that chain, it is a single thread.

Advantages: single thread than multi-thread, system stability, strong scalability, rich software.

Disadvantages: Only one thread, sequential code execution, prone to code blocking (page suspension).

1.3 a multithreaded

  • forJsProvides multi-threaded processing ability, some complex, large data processing can let other threads to deal with
  • Processing without affecting the execution of the main thread (asynchronous for short), so that the page runs more smoothly and without loss of effectiveness.

Web Worker Description:

Web main thread:



1. Load a JS file through worker = new worker (URL) to create a worker and return an instance of worker.

Url: the path of the JS file to be processed asynchronously



2. Send data to worker through worker.postmessage (data) method.

Data: indicates the data to be sent



3. Bind worker.onMessage (value) method to receive data sent by worker.

Value: postMessage Indicates the sent data



4. You can terminate the execution of a worker using worker.terminate().



Worker child thread:

1. Send data to the main thread using the postMessage(data) method.

2. Bind the onMessage method to receive data from the main thread.

Copy the code

The code is as follows:

  1. To create aWorker:
  • In general, andweb workerThe related code is placed in a separateJavaScriptFile.
  • The parent thread passes inWorkerThe constructor specifies oneJavaScriptFile link to create a new oneworkerAnd it will load and execute this asynchronouslyJavaScriptFile.
Var worker = new worker (child thread path);

// console.log(worker); // There is a lot of data on the object



let worker = new Worker('worker.js'); / / create

worker.postMessage('I am the data to be delivered'); // The postMessage method sends data to the worker.

Copy the code
  1. Write the child thread worker.js:
this.onmessage = function(ev){

console.log(ev.data); // the HTML page prints out the data I want to pass

};

Copy the code

Note:

  1. The child thread performs the calculation, cannot proceedDOM BOMoperation
  2. Child threads cannot cross domainsThe file must be stored in the same path
  3. Child threads cannot override child threads
  4. Child threads do not share data with the main threadI make a copy of even the object

Child threads can input operations directly:

// Main thread HTML page

let worker = new Worker('worker1.js');

worker.postMessage(5);

 



// Child thread worker1.js

this.onmessage = function(ev){

console.log(ev.data+5); / / 10

};

Copy the code

Child threads can do some calculations for us:

let worker = new Worker('worker2.js');

worker.postMessage(10); // Send data to the child thread

worker.onmessage = function(ev){// Receive data from the word thread

console.log(ev.data); / / 15

};

 



// Child thread worker2.js

this.onmessage = function(ev){// Receive data from the main thread

this.postMessage(ev.data+5); // Send data to the main thread

};

Copy the code

The above is to introduce js to open multithreaded methods.

At the end

Article source: personal blog https://www.cnblogs.com/ljx20180807/p/9815576.html

Details straight stamp official introduction HTML 5 Web Worker at http://www.w3school.com.cn/html5/html_5_webworkers.asp