HTML Web Workers

Ang Web worker ay JavaScript na tumatakbo sa likod, hindi makakaapekto sa pagganap ng pahina.

Ano ang Web Worker?

Kapag iniaayos ang script sa pahina ng HTML, ang pahina ay hindi makasagot hanggang sa makumpleto ang script.

Ang Web worker ay JavaScript na tumatakbo sa likod, hindi kasama sa iba pang script, at hindi makakaapekto sa pagganap ng pahina. Maaari kang magpatuloy sa anumang ginawa mo: mag-click, magpili ng nilalaman, at iba pa, habang tumatakbo ang web worker sa likod.

Suporta ng Browser

Ang mga numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Halimbawa ng HTML Web Workers

Ang sumusunod na halimbawa ay lumikha ng isang simple na web worker na nagtatala sa likod:

Pangitain:

亲自试一试

Surunin ang Suporta ng Web Worker

Bago lumikha ng web worker, suriin muna kung susuportahan ng user browser ito:

if (typeof(Worker) !== "undefined") {
    // Oo! Suportado ang Web Worker!
    // Ilang kodigo.....
} else {
    // Paumanhin! Hindi suportado ang Web Worker!
}

Lumikha ng Web Worker File

Now, let's create our web worker in an external JavaScript file.

Here, we created the counting script. The script is stored in the "demo_workers.js" file:

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

The important part of the above code is the postMessage() method - it is used to send a message back to the HTML page.

Comments: Web workers are usually not used for such simple scripts but for more CPU-intensive tasks.

Create Web Worker Object

Now that we have the web worker file, we need to call it from the HTML page.

The following code line checks if the worker exists. If it does not exist, it will create a new web worker object and then run the code in "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Then we can send and receive messages from the web worker.

Add an "onmessage" event listener to the web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

When the web worker sends a message, it will execute the code in the event listener. Data from the web worker is stored in event.data.

Terminate Web Worker

After creating a web worker, it will continue to listen for messages (even after the external script is completed) until it is terminated.

To terminate the web worker and release browser/computer resources, use the terminate() method:

w.terminate();

Reuse Web Worker

If you set the worker variable to undefined, you can reuse the code after it is terminated:

w = undefined;

Complete Web Worker instance code

We have seen the Worker code in the .js file. Below is the code for the HTML page:

Sample

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
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! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

亲自试一试

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

  • window 对象
  • document 对象
  • parent 对象