WEB WORKER
자바스크립트 코드를 백그라운드에서 실행시키기 위한 기술
백그라운드에서 실행되는 코드를 '워커'라 부르며, DOM과는 완전히 분리된 환경에서 동작한다.
현재 웹 브라우저는 기본적으로 웹 페이지를 하나의 스레드로 실행한다.
자바 스크립트의 모든 작업을 모두 같은 하나의 스레드로 작업하게 되면 UI작업이 끝날 때까지 화면이 멈춰 있게 된다.
이런 현상을 개선할 때 WEB WORKER를 사용한다.
목적에 따라 사용할 수 있는 2가지의 워커가 규정되어 있다.
1. 워커 객체와 백그라운드 프로세스가 1:1로 대응하는 모델
2. 여러 개의 객체가 하나의 백그라운드 프로세스를 공유하는 모델(공유워커)
워커는 DOM을 조작할 수 없다.(WINDOW나 DOCUMENT 등 브라우저에서 자바스크립트로 접근할 수 없다.)
UI와 WORKER 간에는 postMessage()를 통해서 서로 데이터를 주고 받고, 비동기로 데이터를 공유한다.
워커 생성
var worker = new Worker(불러 올 JS파일);
워커에 대해 메시지 보내기
worker.postMessage(보낼 메시지);
워커에서 워커를 생성한 곳으로 메시지 보내기
onmessage = function() { ... }
|
METHOD |
설명 |
|
onerror |
에러 포착 이벤트 핸들러 |
|
terminate() |
강제 종료 |
|
postMessage(msg, [ports]) |
메시지 송신 |
|
onmessage |
메시지 수신 이벤트 핸들러 |
workerTest1.html
- 이 테스트는 opera에서 보는 게 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
// 워커를 지원하는 지 안하는 지 검사
if (typeof(Worker) == "undefined") {
alert("Web Worker를 지원하지 않습니다.");
return;
}
var worker = new Worker("worker.js"); // 워커 설정
$("#btnStart").click(function() {
$("#output").html("시작..");
worker.postMessage("start"); // 워커로 메시지 전송
});
$("#btnStop").click(function() {
worker.terminate();
alert("Web Worker 작업 중지");
});
// 워커로부터 수신
worker.onmessage = function(e) {
console.log(e.data);
$("#output").html(e.data);
if (e.data == "end") {
alert("작업이 끝났어요.");
}
}
// 에러 발생 시 호출
worker.onerror = function(e) {
console.log(e.message);
}
});
</script>
</head>
<body>
<div id="output">대기</div>
<input type="button" id="btnStart" value="처리">
<input type="button" id="btnStop" value="중지">
</body>
</html>
worker.js
onmessage = function(e) {
if (e.data == "start") {
for (var i=0; i<=100000; i++) {
postMessage(i);
}
}
postMessage("end");
}
workerTest2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var worker = new Worker("workerGugu.js");
$(function() {
$("#btnOk").click(function() {
worker.postMessage($("#guguNum").val());
});
worker.onmessage = function(e) {
$("#result").html(e.data);
}
});
</script>
</head>
<body>
<label>구구단</label>
<input type="text" id="guguNum"/>
<input type="button" id="btnOk" value="확인"/>
<div id="result"></div>
</body>
</html>
workerGugu.js
onmessage = function(e) {
var dan = e.data;
var str = "["+dan+" DAN]<br/><br/>";
for (var i=1; i<=9; i++){
str += dan+" * "+i+" = "+(dan * i)+"<br/>";
}
postMessage(str);
}
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] file 접근 (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] geolocation, geolocation map (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] web storage (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] application cache (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] channel message (0) | 2019.05.22 |
