preface

Blogging is mainly used to summarize and consolidate knowledge points and deepen their understanding of this knowledge point. At the same time, I hope to help people in need. If there is anything incorrect. You can point it out in the comments area. Your support. It is the source of my continuous progress.

For a brief explanation

This is an interview question. At the beginning, the interviewer asked me how to deal with a large amount of data. I blurted out to use pagination at the first time! The interviewer said it was considered from the background. From the front? emmmmm... I thought about it, batch loading, lazy loading. Monitor the sliding batch display data of users. Then I asked, what if I want to calculate and process these large amounts of data, and at the same time, I can't let the page collapse and fake death. How to operate? Suddenly I was stunned, which.. How to operate this. I thought I should do the calculation in the background!

And how can you give so much data to the front end at once~~

Make complaints about make complaints about Tucao.

Later, I asked the following test officials about the general idea of implementation. Later, the interviewer said that it was realized by worker as a sub thread.

OK, let's learn about this worker

What is worker

Operator Worker Interface is Web Workers API Part of a background task,
It is easy to create and send messages back to the creator. Creating a runner requires a simple call Worker()Constructor, specifying a script to execute in the worker thread. (quoted from MDN)

Copy code

The concept may be a little boring. Generally speaking, js is run by a single thread. When encountering js that need to process a large amount of data, it may block the loading of the page and cause the page to fake death. At this time, we can use worker to open up a sub thread independent of the main thread to perform a large number of operations. This will not cause the page to get stuck. It also shows that worker can be used to solve the problem of page jamming caused by a large number of operations.

worker syntax

const worker=new Worker(aURL, options)

Copy code

It has two parameters:

A URL (required) is a DOMString representing the URL of the script that the worker will execute. It must comply with the same origin policy.

options (optional) one of its functions is to specify the name of the Worker, which is used to distinguish multiple Worker threads

worker properties

Worker.onerror: Specifies the listener function for the error event

Worker.onmessage: Specifies the listening function of the message event. The data sent is in the event In the data attribute.

Worker.onmessageerror: Specifies the listener function for the messageerror event. This event is triggered when the sent data cannot be serialized into a string.

worker method

Worker.postMessage(): sends a message to the worker thread.

Worker.terminate(): immediately terminate the worker thread.

Notes on using worker

1. Homology restriction

The script file assigned to the Worker thread to run must be of the same origin as the script file of the main thread.

2.DOM restrictions

The global object where the Worker thread is located is different from the main thread. It cannot read the DOM object of the web page where the main thread is located, nor can it use document, window and parent objects. However, Worker threads can use navigator objects and location objects.

3. Communication

The Worker thread and the main thread are not in the same context. They cannot communicate directly and must be completed through messages.

4. Script restrictions

The Worker thread cannot execute the alert() method and the confirm() method, but can make AJAX requests using the XMLHttpRequest object.

5. Document restrictions

The Worker thread cannot read the local file, that is, it cannot open the local file system (file: / /), and the script it loads must come from the network.

Let's look at a real column

No worker is used

Find the 38th term of Fibonacci sequence

 <div style="width:100px;height:100px;background-color:red;"></div>
 document.querySelector('div').onclick=function(){
    console.log('hello world');
  }
  function fibonacci(n){
    return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);
   }
console.log(fibonacci(38));
Copy code

Using worker

<div style="width:100px;height:100px;background-color:red;"></div>
 
var worker=new Worker('worker.js');
worker.postMessage(40);
worker.onmessage=function(event){
    var data=event.data;
    console.log(data)
};
worker.onerror=function(event){
    console.log(event.fileName,event.lineo,event.message);
};
Copy code

<!--worker.js-->
self.onmessage = function (event) {
    var data = event.data;
    var ans = fibonacci(data);
    this.postMessage(ans);
};

function fibonacci(n) {
    return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
}
Copy code

There are computers around