Learn about HTML5 Web Worker through an experiment

Web worker is a JavaScript that runs in the background and does not affect the performance of the page.

When you execute a script in an HTML page, the state of the page is not responsive until the script is complete.

Web Worker is a JavaScript running in the background, independent of other scripts, without affecting the performance of the page. You can continue to do anything you want to do: Click, select Content, and so on, while the Web worker runs in the background.

The above is W3school's definition of webworker, which is very clear. In this explanation, I saw one sentence at a Glance "page state is not responsive when executing a script", which reminds me of some system dialog boxes for the BOM, like alert. We all know that when there is a message window such as alert, it is modal and synchronous, and the entire HTML page element and script will stop being clicked, until the click of OK, the script will continue to execute. If you follow the nature of the background work of the HTML5 Web worker, does it mean that you can continue executing the code without being restricted to the dialog box. In practice out of the truth, look at the following together!

1. Let's start by looking at the normal situation, how an automatic accumulator works.

The first picture, with the HTML structure attached. We are using a very common method, that is, through a settimeout timer, repeatedly call itself, to achieve the effect of 1S increase once. The accumulated value is then placed in the output tag. Then we'll let it run!

We can see that when we click on the alert button, the number no longer accumulates. This is very common, because dialog boxes are executed synchronously, which means that a non-click can cause a thread to block. Is it hard to use a web worker to keep running? Let's go on with the next look.

2. Use the Web Worker's accumulator.

Before we look at the GIF that runs, let's look at how to build a Web Worker.

First, we need to check whether the browser supports worker, after all, it's a new feature of HTML5. Then directly through the new worker, and then the need to execute the script file as a parameter passed in. Then, by listening to the Web worker's message event, the data is placed in Event.data for real-time feedback. Since there is a message event, the script that needs to be executed will naturally have an operation to send a message, so let's see what it looks like.

That is PostMessage (data), through which we can send data from the worker through a message. The message event is then monitored externally to update the data. That said so much, is the real problem solved? That is, the script executed by the worker is independent of other scripts and runs in the background itself. Nonsense not much to say, directly look at the effect!

It's so awesome! I couldn't help but hit a few words. We can clearly see that for single-threaded JavaScript, even if the modal box blocks the thread, the number of the counter is still changing. ( There are some small questions here, since the thread is blocked, but why does the message event listener trigger innerHTML still be able to run?) Is it the reason that the event will be executed as soon as it triggers? Have the person who knows can help answer, thank you ~! From here we can see clearly that the JS script in the Web worker is independent and does not conflict with the script of the current page. Of course, it is to be mentioned here that the scope of the Web Worker's JS script and the current Page JS script scope can not be shared, in other words, their global scope is not the same, the global scope of the worker is itself, so the web The worker naturally cannot manipulate DOM elements.

So what can we do with Web Worker? Because of the single thread of JS, we have to prevent the excessive computation of blocking the user page, that through this HTML5 the latest Web Worker technology, we can put some very time-consuming calculations on the outside, so as not to affect the user experience.

Finally, here is the same. Hopefully this will help more people learn more about the new HTML5 technology, and then proactively explore more web technologies.

Learn about HTML5 Web Worker through an experiment