HTML5 new features multi-thread (Worker SharedWorker) and html5sharedworker
There is no doubt that JavaScript does not have multithreading. He can only do one thing and one thing, and then do the next thing, if your js needs to take a long time to do one thing, then the browser will get stuck for a while and will not respond to user operations. What can this do? Thank God, HTML5 provides us with a multi-threaded mechanism. You may have used such a good thing for a long time, but it doesn't matter. Let's review it together!
I. Worker class
1. Method Introduction
(1) constructor new Worker (arg): The parameter indicates the js file of the code to be executed by your thread, for example, 'myworker. js'. The constructor certainly returns an instance of the Worker class.
(2) worker. postMessage (message): indicates that the message is sent from the main thread to the subthread or from the subthread to the main thread. The message is generally a string, you can also convert a js object into a string and send it
(3) There is a message event on the worker. When someone sends a message to the worker instance, this event is triggered, we can obtain the post value from the data attribute of the event object.
We can see that the Woker class API is quite concise. There are only two most commonly used methods and one event. Let's take a look at the actual example below.
// Main.html <! DOCTYPE html>When I enter "Big ~" in the text box ~ The following effect is displayed when "bear" clicks the send button.
Simple Analysis: I created a Worker instance worker in thead1.js in the main thread. When I click the button, I will call its postMessage method and send the content in the text box to thread1.js, how does our thread1.js work? In this case, he listens on the message event. When the main thread sends a message, it triggers the event and executes the callback function. The callback function obtains the sent value from the event object, add this value to "handsome! ", Then, send it back. The main thread also listens to the message event of the worker, so when there is a message, it will be triggered, and the message content will be displayed in the div, so that we can see the above effect.
Maybe you will use this? This is really useless. Here we can add "handsome" to the main thread !" Because of its complexity of O (1) (haha, recently Learning Algorithms !), But what if it is not such a simple operation? The advantage of this method is that, however, how complicated your sub-thread is, it will not stop the main thread. Why should the main thread be changed, when the sub-thread completes the data processing, he just takes it.
Instructor Lu will be able to call new Worker () in the subthread to create a new subthread. I found this is not possible and will report the undefined error, that is to say, in the Child thread, the Worker constructor cannot be called. At first, I thought I was wrong. Later I checked the official document and found that there was no relevant description.
The following is an example of calling multiple sub-threads in the main thread:
// Main.html <! DOCTYPE html>The main thread needs two threads to complete a task. It creates two threads, worker1 and 2. It first requests worker1 and obtains the returned data before requesting worker2, at the same time, the processed data of worker1 is handed over to worder2 for processing, and the final result is obtained and displayed on the page.
In the child thread, you can introduce other js files and call them. For example, the following example is used.
// Main.html <! DOCTYPE html>We can see that thread1.js does not have a file named tools. js, But it imports a js file through importScripts (), and then it can call the exposed method.
Ii. SharedWorker class
The essence of SharedWorker is share. Different threads can share one thread and their data is also shared.
We will discuss it with examples directly.
Method 1:
//main.html<!DOCTYPE HTML>This is an example from w3c. Let's take a look at the second method and then analyze it.
<!DOCTYPE HTML>The first method is to use the event handle to listen to message events without calling worker. port. start (). The second method is to listen to message events through the addEventListener () method, and worker is required. port. start () method to activate the port. They are different from worker. When someone communicates with him, the connect event is triggered, and his message event is bound to the messagePort object, you can look back at how worker works.
So how does sharedWorker share data? See the following example.
// Both main1 and main2 are like this <! Doctype html>The data set in worker, which indicates that our sharedWorker is actually a Singleton, just like the static class in java, no matter how many new, there is actually only one, in this way, different threads can share data in sharedWorker. Here, I will show the figure. I remember that I didn't give a picture in an article, and someone gave me a suggestion and asked me if I could give it.
In the end, worker and sharedWorker have nothing to worry about. They just move their work to the background without interrupting them. Ten minutes on the stage, ten years of work. If you put ten years on the stage, the audience would have drowned you, so those laborious jobs are still put on the stage. It's only good to show your best side on the stage. Ten minutes is enough!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
