preface

Blog writing is mainly used to summarize, consolidate knowledge points, deepen their understanding of this knowledge point. I also want to help those in need. If there is anything wrong. Point it out in the comments section. Your support. Is the source of my continuous progress.

Just a quick note

This is an interview question. At the beginning, the interviewer asked me how to deal with a large amount of data. I blurt out with pagination for the first time! The interviewer said it was from a backstage perspective. What about the Angle from the front? emmmmm… I thought about it, batch loading, lazy loading. Listen to the user’s sliding batch display of data. And then, what if I had to compute and manipulate all this data without crashing and feigning death? How do you do that? I was so confused, it was… How does this work? I want to do calculations in the background!

And how is it possible to give the front end so much data at once, ~~

Complaining is complaining, teasing is teasing

Later, I asked the interviewer about the general idea of implementation. Later, the interviewer said that the child thread was implemented through the worker.

Ok, let’s learn about the worker

What is a worker

The runner Worker interface is part of the Web Workers API and represents a background task that is easy to create and send messages back to the creator. To create a runner, simply call the Worker() constructor, specify a script, and execute it in the Worker thread. (From MDN)Copy the code

The concept may be a little boring, but the common point is: because JS is a single thread running, some JS that need to process a large amount of data may block the loading of the page, causing the page to suspend. At this point, we can use worker to open up a child thread independent of the main thread to perform a lot of operations. This will not cause the page to freeze. It also indicates that worker can be used to solve the problem of page jam caused by a large number of operations.

The grammar of the worker


const worker=new Worker(aURL, options)

Copy the code

It takes two arguments:

AURL (must) is the URL of a script that DOMString represents 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

The properties of the worker

Worker.onerror: Specifies a listener for error events

Worker. onMessage: Specifies the listener function for the message Event. The sent data is in the Event.

Worker. onMessageError: Specifies a listener function for messageError events. This event is emitted when the sent data cannot be serialized into a string.

The method of the worker

Worker.postmessage () : sends a message to the Worker thread.

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

Use worker’s attention points

1. Homology restriction

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

2. The DOM

Unlike the main thread, the global object where the Worker thread is located cannot read the DOM object of the page where the main thread is located, nor can document, window, parent objects be used. However, Worker threads can have navigator objects and Location objects.

3. Correspondence

The Worker thread and the main thread are not in the same context; they cannot communicate directly and must be done via messages.

4. Script limitations

Worker threads cannot execute the Alert () and Confirm () methods, but can make AJAX requests using the XMLHttpRequest object.

5. File restrictions

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

Let’s look at a real column

The worker is not used

Find the 38th term of the 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 the code

Situations where workers are used

<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 the 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 the code

If you have a computer around you, you can copy the code above to the computer, compare it and see the effect. You will understand the function of the worker.

What I have recorded here may be a little rough. For more details, please see the following articles (of course, I refer to these articles).

MDN

What is a Web Worker?

Web Worker Tutorial

Write bad place, also please friends to put forward again in the comment area oh!