HTML5 Web Workers API
웹워커는 웹페이지 성능에 영향을 주지않고 자바스크립트의 수행을 배경으로 처리합니다.
일반적으로 웹 브라우저는 웹페이지를 하나의 쓰레드로 처리하기 때문에 자바스크립트의 로직을 처리하다보면 시간이 오래 걸리거나 멈춰 있는 것처럼 될 때도 있습니다. 이런 문제를 해결하기 위해 html5에서 추가한 것이 웹 워커입니다. 웹 워커를 통해 일종의 멀티스레드를 구현한 것입니다.
IE10이상 및 대부분의 브라우저가 웹 워커를 지원합니다.
웹 워커 예제
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button [안내]태그제한으로등록되지않습니다-xxonclick="startWorker()">Start Worker</button>
<button [안내]태그제한으로등록되지않습니다-xxonclick="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, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
웹 워커 만들기
var w;
function startWorker()
w = new Worker("demo_workers.js");
}
Worker 객체를 생성하고 스레드로 수행할 js화일을 파라미터로 넣어주면 됩니다.
워커에서 보낸 메시지 받기
워커에서 워커를 생성한 곳으로 메시지를 보내면 아래와 같이 받게 됩니다.
w.[안내]태그제한으로등록되지않습니다-onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
웹 워커 종료하기
워커를 중간에 종료하려면 terminate메소드를 호출합니다.
w.terminate();
워커화일 예
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
워커에서 필요한 작업을 마치면 결과값을 보내게 됩니다. 이 때 postMessage()메소드를 사용합니다.
postMessage(i);
Web Worker는 언제 사용할까요?
덩치가 큰 배열처리할 때
Json 데이타 처리할 때
복잡한 수학 계산할 때
많은 문자열의 인코딩 또는 디코딩할 때
비디오나 오디오 데이타 처리할 때
네트웤을 통한 데이타 처리할 때