Webworker and Async - What is the difference and when to use it?

Question

I am studying specifically an implementation of Webworker, and did not understand very well the difference between Webworker and Async in Javascript, whereas Webworker gives me an asynchronous solution with a better (in my view) code organization.

Answer 1

Both are somewhat similar.

Asynchronous functions are only possible when used with one of the following options:

• Settimeout
• Setinterval
• Xmlhttprequest
• Webworkers

Webworkers are also part of this list, even though they do not belong to the same category.

The main difference between all of them is access to resources. Using XMLHttpRequest you exchange data between client and server asynchronously using the same wire.

Due to the misuse of multi-core processor hardware came the Webworkers for parallel programming. Access to memory is limited to the data being exchanged with it. They run in separate segments and the user interface is available for other activities.

Workers cannot access the DOM to read or modify the HTML document. In addition, they cannot access any global variables or Javascript functions within the main page. Access to some objects, including the window, the document are restricted.

Illustration:

Note: If you want to go deeper into Webworkers, I recommend reading this article:

• Introduction to Web Workers: how to bring sequencing to Javascript.

The article has a very self-explanatory step-by-step how to create an asynchronous request with Webworkers.

In the W3C documentation, you have an example of a counter.

Javascript

var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}

The file "demo_workers.js" must be in a separate file, because they are performed in isolated sequence.

demo_workers.js

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

Source:

• What’s the Difference between Web Workers and Asynchronous Functions in Javascript?
• Introduction to Web Workers: how to bring sequencing to Javascript