JAVASCRIPT Web Worker 를 이용한 Background 작업처리

JAVASCRIPT Web Worker 를 이용한 Background 작업처리

데이터 처리시 시간이 오래걸리는 작업은 Worker 를 이용해서 multi thread 처리가 가능하다.

익스플로러는 10 버전 부터 지원한다.

Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.

처리 도중 위와 같은 에러는 데이터 전달시 JSON.stringify 와 JSON.parse 를 이용하면 된다.

▶ Web worker 예제

var worker = null;

function startWorker() {

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

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

worker.onmessage = function(event){

var ret = event.data;

if(ret) {

// ...

}

}

}

}

function stopWorker() {

worker.terminate();

worker = null;

}

function sendWorker() {

var obj = {msg:'test',data:'Hellow world!'};

if(worker) worker.postMessage(obj);

}

$(document).ready(function(){

startWorker();

sendWorker();

});

▶ worker.js

onmessage = function(event) {

var obj = event.data;

// alert(obj.msg + ', ' + obj.data);

// 여기서 시간이 올래 걸리는 작업을 수행

postMessage({result:'success'}); // 결과를 전달

}

자주 사용되지는 않겠지만 백그라운드로 처리를 해야하는 경우에는 정말로 유용한 기능이다.