[이전 글]

2017/02/03 - [소프트웨어/JS, Node.js] - 웹 워커(Web Worker) - 1. 개요


웹 워커는 UI 스레드와 별개로 동작한다. UI 스레드 상에서 여러 작업들끼리 시간을 나눠가며 실행될 필요 없이 오직 내 스크립트만을 위한 공간에서 끊김없이 작업을 이어나갈 수 있으며, UI 스레드는 널널해져서 페이지는 사용자 반응을 빠릿하게 처리할 수 있다는 장점이 있다.


웹 워커 사용 예

아래는 시간이 오래 걸리는 작업(1부터 5000000000까지의 합 계산)을 일반 코드 vs 웹 워커 상에서 실행하는 예시이다. 작업이 실행중일 때 일반 코드는 페이지의 반응이 멈추어 아래 버튼이 클릭되지 않는 반면, 웹 워커에서 실행하면 자유롭다.

실행 시간은 두 경우 모두 비슷하지만, 페이지가 멈추기 때문에 창을 새로 고칠 수 없고 클릭에 대한 반응도 할 수 없는 등 전반적으로 좋지 않다.


웹 워커 선언

처음에 페이지에 있는 스크립트에서 워커 객체를 생성한다.

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

이러면 worker.js 파일을 불러와서 웹 워커 상에서 실행하고, worker 변수를 통해 워커를 제어할 수 있다. worker.js라는 파일을 만들어서 코드를 작성하면 되는 것이다.


그렇다면 그 코드가 실행되는 과정 혹은 결과는 어떻게 알 수 있을까?

웹 워커와의 통신은 이벤트 기반으로 이루어진다.

// worker.js
onmessage = function(e) {
	postMessage(e.data + " World!");
};
// 페이지 스크립트
var worker = new Worker("worker.js");
worker.onmessage = function(e) {
	console.log(e.data);
};
worker.postMessage("Hello");

간단한 웹 워커 사용 예제이다. 스크립트에서 웹 워커를 생성하고 message라는 이벤트의 리스너를 등록하고 값을 보내면, 웹 워커에서는 message 이벤트가 발생하고 e.data 값을 이용해 결과를 원래 창으로 전송한다. 그러면 결과적으로 "Hello" + " World!" = "Hello World!"라는 문자열이 콘솔에 출력될 것이다.


위처럼 가장 기본적인 틀을 바탕으로 느려지는 부분을 웹 워커 상에서 실행하면 된다. 넘겨주는 값은 문자열, 숫자 뿐만 아니라 배열이나 객체도 가능하다.


참고로 웹 워커 스크립트 내에서는 몇몇 작업들(DOM 수정 포함)을 하지 못한다. UI 스레드에서 화면을 그리고 있는데 워커에서 갑자기 내용을 바꾸었을 때의 처리 등 복잡한 문제가 발생한다. 따라서 결과값을 이벤트로 보내고, UI쪽 코드에서 처리해야 한다.

'소프트웨어 > JS, Node.js' 카테고리의 다른 글

웹 워커(Web Worker) - 2. 사용법  (0) 2017.02.23
웹 워커(Web Worker) - 1. 개요  (0) 2017.02.03
블로그 이미지

예비컴공돌이

각종 프로젝트 진행중! 생각날때마다 블로그 업데이트합니다.