HTML Web Workers

What is Web Worker?

Web Workers run JavaScript in background without blocking UI.

Example

<h3>Web Worker Demo</h3>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<p id="output"></p>

<script>

let worker;

function startWorker(){

    if(typeof(Worker) !== "undefined"){

        if(!worker){

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

            worker.onmessage = function(e){
                document.getElementById("output").innerHTML = e.data;
            };
        }

    } else {
        document.getElementById("output").innerHTML = "Web Worker not supported";
    }
}

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

</script>
Try it Yourself

Live Demo

0

Background Task

Runs without blocking page

Faster UI

Improves performance

Parallel Processing

Runs tasks in parallel

Summary