Detailed introduction to Web Workers in JavaScript

This article brings you a detailed introduction to Web Worker in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Introduction

Web Workers provide a simple way to run scripts in a background thread for web content. Threads can perform tasks without interfering with the user interface. Additionally, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always empty). Once created, a worker can send messages to the JavaScript code that created it, by publishing the message to the event handler specified by that code (and vice versa).

Key points for using Web Worker

• Same source restriction: The script file assigned to the Worker thread must have the same origin as the script file of the main thread.

• 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, and cannot use document, window, and parent objects. However, Worker threads can navigate navigator objects and location objects.

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

• Script limitation: Worker thread cannot execute alert() method and confirm() method, but can use XMLHttpRequest object to issue AJAX request.

• File restrictions: The Worker thread cannot read local files, that is, it cannot open the local file system (file://). The script it loads must come from the network. We will deal with it later.

Install http-server

The Worker thread cannot read local files, that is, it cannot open the local file system (file://), and the script it loads , must come from the Internet. So we can afford a project. Usehttp-serverThe easiest
Installation:

> cnpm i -g http-server

Use:

> http-server

Basic use

We create a new folder namedworker, there are three new files in it, namely

index.html
main.js
worker.js

Creating a worker thread is very simple, just:

var worker = new Worker('worker.js')

main.js:

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    // 发送数据事件
    postMessage('Hello, I am from Worker.js');
}

In the worker folder, enter http-server on the command line, start the project, open it with a browser, and see the control Station:

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

As you can see from the above, worker monitors data through onmessage and sends data through postMessgae

Termination worker

worker.terminate();

Handling errors

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

• event.filename: The name of the Worker script that caused the error;

• ##event .message: Error message;

• event.lineno: The wrong line number;

Load external script

main.js

var worker = new Worker('./worker1.js');

worker1.js

console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
// 或者
// importScripts('worker2.js');
// importScripts('worker3.js');

worker2.js

console.log("I'm worker2")

worker3.js

console.log("I'm worker3")

Compatibility

https: //caniuse.com/#feat=webworkers

The compatibility is not very optimistic, but the compatibility on the mobile terminal is not bad

Related recommendations:

Web in JavaScript Worker multi-thread API research_javascript skills

##Detailed introduction to classes (Class) in JavaScript_javascript skills

The above is the detailed content of Detailed introduction to Web Workers in JavaScript. For more information, please follow other related articles on the PHP Chinese website!