HTML Web Workers

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

Ano ang Web Worker?

Kapag isinasagawa ang script sa HTML pahina, ang pahina ay hindi puwedeng tumugon, hanggang ang script ay nakumpleto.

Ang Web worker ay gumagana sa likod na JavaScript, na malaya sa ibang script, at hindi makakaapekto sa pagganap ng pahina. Maaari kang magpatuloy sa anumang ginawa mo: pag-click, pagpili ng nilalaman, at iba pa, habang gumagana ang web worker sa likod.

Suporta ng Browser

Ang mga numero sa talahanayan ay nagpapakita ng 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 halimbawa sa ibaba ay nagbuhat ng isang simple web worker, na gumagawa ng bilang sa likod:

Pangkakalatang:

亲自试一试

Detekta ang Web Worker Support

Bago mo magbuhat ng web worker, tingnan mo muna kung ang user browser ay tumutustusan ito:

if (typeof(Worker) !== "undefined") {
    // Oo! Suportado ang Web worker!
    // Mga code.....
} else {
    // Paalam! Hindi suportado ang Web Worker!
}

Buhat 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, the code in the event listener will be executed. Data from the web worker will be 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 Example Code

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

Example

<!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 对象