categorized under 웹이야기 & written by cryinglemon
|
개요 |
웹 브라우저 성능에 영향을 주지 않고 백그라운드에서 자바스크립트를 실행하는 API이다.
메인 스레드와 병행하여 동작하기 때문에 사용자의 동작에 바로 반응할 수 있는 멀티 스레드 구현이 가능하도록 설계하였다.
worker는 UI스레드와 분리되어 있기 때문에 UI스레드가 가지는 DOM1에 접근이 불가능 하므로 UI처리를 할수 없다.
이로써 UI처리와 로직을 분리시켜는 역할을 하게 되었다.
worker는 두가지 종류를 가진다.
- dedicated worker : 워커 각각이 하나의 프로세스로 동작하며 워커끼리는 데이터를 공유하지 못한다.
- shared worker : 다수의 워커가 하나의 프로세스를 사용하여 워커끼리 데이터공유가 가능하다.
| worker의 주요 메소드와 이벤트 |
|
dedicated worker |
imporScripts(url,[url]...) |
사용할 외부 스크립트 파일을 로딩 |
|
postMessage(message,[post]) |
지정한 메세지를 생성한 곳으로 전송 | |
|
message |
메세지 수신시 발생하는 이벤트 | |
|
shared worker |
post |
다른 worker와 통신하는 MessagePort객체 |
|
importScripts(url,[url]...) |
사용할 외부 스크립트 파일 로딩 | |
|
postMessage(message,[posts] |
지정한 메세지를 생성한 곳으로 전송 | |
|
connect |
공유 워커 생성시 발생하는 이벤트 |
|
Web Worker 사용해보기 |
w3schools에 나오는 소스를 보면서 간단하게 worker의 사용을 해보려고 한다.
0. 브라우저 지원 여부 확인
if(typeof(Worker)!=="undefined")
{
⁄⁄worker를 지원함
}
else
{
⁄⁄worker를 지원하지 않음
}
1. 독립된 .js 파일을 작성
UI와 분리되는 .js확장자를 가진 스크립트 파일을 먼저 작성한다.
message 이벤튼 핸들러를 이용하여 메세지를 수신할수 있으며,
전역함수 postMessage()를 이용해 메세지를 전송할수 있다.
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
2. worker 생성
워커를 작성했으면 만든 워커를 가져온다.
dedicated worker 일경우
w = new Worker("demo_workers.js");
shared worker 일 경우
w = new SharedWorker("demo_workers.js");
3. worker로 받은 메세지 처리
메세지가 수신될 경우 지정한 작업을 처리하기 위해 onmessage 이벤트핸들러를 등록하고
인자로 설정된 MessageEvent객체의 data속성을 이용해 받은 메세지를 꺼내어 사용한다.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
4. 작업 종료
terminate()이용해 worker를 강제 종료해준다.
w.terminate();
5. 전체 소스
[demo_workers.js]
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
[demo_worker.html]
<!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, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
<⁄script>
<⁄body>
<⁄html>
- window object document object parent object 등 [본문으로]
'웹이야기' 카테고리의 다른 글
| [매일 HTML5 공부 16] Web SQL Database (0) | 2013.05.28 |
|---|---|
| [매일 HTML5 공부 15] Web Storage (0) | 2013.05.24 |
| [매일 HTML5 공부 14] Application Cache (4) | 2013.05.24 |
| [매일 HTML5 공부 13] Canvas요소 (0) | 2013.05.21 |
| [매일 HTML5 공부 12] Audio와 Video 요소 (0) | 2013.05.17 |
