JavaScript Threading With HTML5 Web Workers

Key Points

• Web Workers in JavaScript are a powerful feature in the browser that allows developers to run continuous processes in separate threads, thereby significantly improving client performance. However, they run independently of the browser UI thread and have some limitations, such as the inability to access DOM, global variables, or JavaScript functions in the page.
• To create and communicate with a dedicated Web Worker, the developer passes the JavaScript file name to a new instance of the Worker object and handles all communications through the event interface. The web script passes a single data parameter through the postMessage() method and receives a return data through the onmessage event handler.
• Modern browsers widely support Web Workers, but none of Internet Explorer's versions. They can use standard JavaScript data types, process XMLHttpRequest (Ajax) calls, use timers, import other Workers, and are ideal for handling time-consuming tasks such as analyzing large data blocks, game AI logic, and ray tracing.

Put aside conversions, native videos, semantic tags, and all other flashy HTML5 features; since JavaScript comes, Web Workers are the best feature in the browser! Web Workers ultimately allow developers to run ongoing processes in separate threads. Threading sounds complicated, and some development languages ​​make it tricky, but you'll be glad to hear that JavaScript is implemented well and that the W3C working draft is stable. Web Workers offer huge client performance gains, but before we get started, there are some things to note...

Web Worker Limitations

Web Workers run independently of browser UI threads, so they do not have access to many of the features that JavaScript developers are familiar with and love. The main limitation is that Web Workers cannot access the DOM; they cannot read or modify HTML documents. Additionally, you cannot access global variables or JavaScript functions in the page. Finally, access to certain objects is restricted, for example, the window.location attribute is read-only. However, Web Workers can use standard JavaScript data types, process XMLHttpRequest (Ajax) calls, use timers, and even import other Workers. They are ideal for handling time-consuming tasks such as analyzing large data blocks, gaming AI logic, ray tracing, and more.

Web Worker Browser Support

At the time of writing, all the latest versions of Firefox, Chrome, Safari, and Opera support Web Workers to some extent. Guess which browser does not support it? As expected, no version of Internet Explorer implements Web Workers. Even if IE9 doesn't provide support, I doubt/hope it will be implemented in the final version. Until then, you have three options:

• Forget Web Workers within a year or two.
• Accepting your application will crash in IE.
• Implement your own Web Worker shim, which falls back to a timer-based pseudo-thread or array processing. This may not be feasible or desirable in all applications.

What is a Web Worker?

Web Worker is a single JavaScript file that is loaded and executed in the background. There are two types:

• Special Workers: These Workers are associated with their creators (the scripts that load Workers).
• Shared Worker: Allows any script from the same domain (somesite.com) to communicate with Worker.

Today, we will discuss dedicated Web Workers…

Create a dedicated Web Worker

To create a dedicated Web Worker, you can pass the JavaScript file name to a new instance of the Worker object:

var worker = new Worker("thread1.js");

Communicate with dedicated Web Worker

As Web Worker cannot access the DOM or execute functions in page scripts, all communications are handled through the event interface. The web script passes a single data parameter through the postMessage() method and receives a return data through the onmessage event handler, for example pagescript.js:

var worker = new Worker("thread1.js");

// 接收来自 Web Worker 的消息
worker.onmessage = function(e) {
    alert(e.data);
};

// 发送消息到 Web Worker
worker.postMessage("Jennifer");

Web Worker script receives and sends data accordingly through its own onmessage event handler and postMessage() method: thread1.js:

self.onmessage = function(e) {
    self.postMessage("Hello " + e.data);
};

Message data can be a string, a number, a boolean, an array, an object, null, or undefined. The data is always passed by value and is serialized and then deserialized during communication.

Processing Web Worker Error

Web Worker code is unlikely to be perfect, and logical errors can be caused by data passed by the page script. Fortunately, the error can be caught using the onerror event handler. Handler event passes an object with 3 attributes:

• filename: The name of the script that caused the error;
• lineno: The line number where the error occurred; and
• message: Incorrect description.

pagescript.js:

worker.onerror = function(e) {
    alert("Error in file: "+e.filename+"\nline: "+e.lineno+"\nDescription: "+e.message);
};

Load more JavaScript files

You can use importScripts() to load one or more additional JavaScript libraries into a Web Worker, for example:

importScripts("lib1.js", "lib2.js", "lib3.js");

Or, you can load more web workers…but, I recommend keeping it simple until the browser catches up with your threading ambitions!

Stop dedicated Web Worker

You can use the close() method to stop the Web Worker thread, such as thread1.js:

self.onmessage = function(e) {
    if (e.data == "STOP!") self.close();
};

This will discard any pending tasks and prevent further events from being queued. That's all you need to know about dedicated Web Workers. In my next post, we’ll discuss sharing Web Workers – a more complex guy!

FAQs (FAQs) about JavaScript Parallel Processing and HTML5 Web Workers

(The FAQ part is omitted here because the length is too long and does not match the pseudo-original goal. The FAQ part can be reorganized and rewritten as needed, but the original intention must be kept unchanged.)

The above is the detailed content of JavaScript Threading With HTML5 Web Workers. For more information, please follow other related articles on the PHP Chinese website!