[Web API] Worker

Web Workers API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

 

Worker는 background thread에서 script를 실행하는 객체로서, window 객체와 다른 전역 문맥에서 실행되므로, 직접적으로 DOM을 조작할 수 없다. Worker과 Main Thread간의 데이터 교환은 메시지를 통해서 이루어진다.

- postMessage(), onmessage event handler

 

* Functions and classes available to Web Workers

 

 

Using Web Workers

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

 

Dedicated workers

해당 Worker를 호출한 script에서만 접근가능

// main.js
let myWorker = new Worker('worker.js');
myWorker.postMessage([value1, value2]);

myWorker.onmessage = function (e) {
    console.log(e.data);
    myWorker.terminate();
};


// worker.js
importScripts('//example.com/hello.js');

onmessage = function (e) {
    let workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    postMessage(workerResult);
};

 

Shared workers

port 객체를 통해서 여러 script에서 접근가능

// index.html
let myWorker = new SharedWorker('worker.js');
myWorker.port.postMessage([value1, value2]);

myWorker.port.onmessage = function (e) {
    console.log(e.data);
}


// worker.js
onconnect = function (e) {
    var port = e.ports[0];

    port.onmessage = function (e) {
        var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
        port.postMessage(workerResult);
    }
}