web worker API
웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 된다.
web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트이다.
즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원한다.
따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해준다.
web worker 지원 여부 확인
web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.
if (typeof(Worker) !== "undefined") {
// web worker를 위한 코드 부분 }
else {
// web worker를 지원하지 않는 브라우저를 위한 안내 부분
}web worker 파일 생성
web worker의 동작을 확인하기 위해 소수를 찾는 외부 자바스크립트 파일을 만든다.
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
postMessage(n);
}위의 예제에서 postMessage() 메소드는 HTML 문서에 결과를 전달하기 위해 사용한다.
web worker 객체 생성
위에서 만든 web worker 파일을 불러올 HTML 파일을 만든다.
if(typeof(webworker) == "undefined") {
webworker = new Worker("/web_worker.js");
}위의 예제는 web worker 파일이 존재하지 않으면, 새로운 web worker 객체를 만들어 준다.
worker 객체와의 연결
onmessage 이벤트 리스너(event listener)를 통해 web worker 파일과 메시지를 주고받을 수 있다.
webworker.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};위의 예제에서 web worker 파일이 메시지를 보내면 해당 이벤트 리스너(event listener)가 실행된다.
이 때 web worker 파일이 보낸 정보는 event.data에 저장된다.
web worker 객체의 실행 종료
web worker 객체는 생성되고 나서 종료될 때까지 계속해서 메시지를 받을 준비를 한다.
따라서 웹 브라우저나 컴퓨터의 자원을 돌려주기 위해서는 terminate() 메소드를 사용하여 web worker를 반드시 종료해줘야 한다.
webworker.terminate();web worker 객체의 재사용
web worker 객체가 종료된 후에는 web worker의 값을 undefined로 설정해야만 web worker 객체를 재사용할 수 있다.
webworker = undefined;web worker 예제
위에서 살펴본 web worker의 동작을 하나의 예제로 보여주는 예제이다.
var webworker;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js"); }
webworker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; };
}
}
function stopWorker() {
webworker.terminate();
webworker = undefined;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 API Web Worker</title>
</head>
<body>
<h1>web worker를 이용한 동시 작업</h1>
<p>현재까지 발견한 소수의 개수는 <output id="result"></output>이다.</p>
<button onclick="startWorker()">Web Worker 시작</button>
<button onclick="stopWorker()">Web Worker 종료</button>
<p>위의 스크립트가 실행되는 동안에도 텍스트 필드에 글을 쓰는 작업을 동시에 할 수 있다.</p>
<textarea rows="10" cols="50"></textarea>
<script>
var webworker;
function startWorker() {
if(typeof(Worker) !== "undefined") { // web worker 지원 여부 확인
if(typeof(webworker) == "undefined") { // web worker 객체 생성
webworker = new Worker("/examples/media/web_worker.js");
}
webworker.onmessage = function(event) { // web worker 객체와의 연결
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "이 문장은 사용자의 웹 브라우저가 Web Worker API를 지원하지 않을 때 나타난다.";
}
}
function stopWorker() {
webworker.terminate(); // web worker 객체의 실행 종료
webworker = undefined; // web worker 객체의 재사용
}
</script>
</body>
</html>
'Language > HTML' 카테고리의 다른 글
| [HTML] Canvas vs SVG (0) | 2022.09.22 |
|---|---|
| [HTML] Server Sent Events API (0) | 2022.09.21 |
| [HTML] Application Cache API (0) | 2022.09.21 |
| [HTML] Web Storage API (2) | 2022.09.21 |
| [HTML] Drag and Drop (0) | 2022.09.21 |