[Javascript] Multi Thread 사용 방법

Javascript는 단일 Thread로 동작되는 언어이다.

그럼에도 Mutli Thread로 구현을 해야 할 때가 있다.

이 때 'Web Worker' 를 사용하면 된다.

Javascript에서 동적으로 UI를 변경 시킬 때 UI Thread 공간에서 Queue 방식으로 처리순서를 담아 놓는다.

(이에 대한 자세한 내용은 이벤트 Loop를 설명할 때 진행하도록 하겠다.)

 

Web Worker는 Multi Thread 기능을 지원하여 Worker가 생성될 때 마다 Javascript를 실행할 수 있는 고유 스레드를 생성하여 속도 성능을 크게 향상시킬 수 있다.

 

Worker에서 실행하는 코드는 Browser UI, 다른 워커에서 실행하는 코드에도 영양을 안주는 독립적인 Thread 이다.

 

그럼 Worker를 생성하는 방법에 대해 알아보자.

먼저 Worker.js 파일을 하나 만들어 사용할 로직을 만들어보자.

// worker.js
 
var updateTime = function() {
    postMessage(new Date().toLocaleString());
    setTimeout(updateTime(), 1000); // recursive
};
 
updateTime();

간단하게 1초마다 시간을 업데이트 해 어딘가로 보내주고 있는 로직이다.

 

위 worker.js를 사용하기 위해선 아래와 같이 사용해주면 된다.

// app.js
 
var worker = new Worker("worker.js");
worker.onmessage = function(response) {
    console.log(response);
}

굉장히 간단하다.

 

postMessage를 통해 데이터를 송신하고, app.js에서는 worker.onmessage를 통해 Message가 들어왔을 때 console.log();를 호출하는 기능이다.

 

물론 worker를 사용하기 전 호환성 검사는 반드시 필요하다.

또한, 위 Worker는 GC가 자동으로 처리를 못해주기 때문에 Application이 종료될 때 아래와 같은 코드를 반드시 실행해주도록 하자.

worker.terminate();
worker = undefined;