싱글스레드 자바스크립트

1. 자바스크립트는 어떤 언어 인가? 

 

-> 자바스크립트는 인터프리터 언어이며 단일 스레드이다.

 

2. 실제 사용시 멀티스레드처럼 사용하는 방법은?

-> Web Worker (멀티스레드)

 

Web Worker란? 

멀티스레드의 기능. Web Worker가 생성될 때 마다 고유 스레드를 같이 생성한다.

HTML 페이지에서 스크립트가 실행되면 해당 페이지는 스크립트가 끝날 때 까지 작업을 멈춘다.

이를 해결하기 녀석이 Web Worker이다. 이 녀석의 핵심 특징 2가지는 아래와 같다.

 

특징

1) Web Worker는 HTML페이지의 퍼포먼스에 영향을 주지 않는다.

2) 다른 스크립트와는 독립적으로 백그라운드에서 실행되는 JS(멀티스레드)이다.

 

효과

멀티스레드 작업이 가능해짐으로 속도 성능 크게 향상.

기존의 웹은 오로지 단일스레드였기 때문에 작업이 끝나기 전에 UI가 멈춰버리는 현상이 발생했다.

하지만, Web Worker의 등장으로 웹은 멀티스레드 작업이 가능해졌다.

+

자바스크립트에서 동적으로 UI변경 작업시 UI스레드라는 공간에서 큐 방식으로 처리 순서를 담아 놓는다.

*큐방식이란 ? 선입선출 - 먼저들어온 순서대로 작업을 처리.

*스택방식이란 ? 후입선출 - 가장 나중에 들어온 작업을 먼저처리.

자세한 내용 ->  devuna.tistory.com/22

 

웹워커가 사용되는 상황

1) 매우 큰 문자열의 암호화/복호화

2) 복잡한 수학계산(이미지/비디오 처리포함)

3) 매우 큰 배열의 정렬

 

-> 로딩과 실행이 오래 걸리는 자바스크립트 파일.

 

Example

 

worker.html

<meta charset='utf-8'>
<script>
let w;
// 워커 시작					
function startWorker() {
  if(window.Worker) { // 브라우저가 워커 호환되는지 검사
      w = new Worker('worker.js'); // 워커 생성
      w.onmessage = function(event) {
          alert(event.data);
      };
  }else {
   	  alert('Web Worker를 지원하지 않는 브라우저 입니다');
  }
}
</script>

worker.js

function timedCount() {
  postMessage('test');
  setTimeout('timedCount()', 1000);
}

timedCount();

// 웹워커 종료

function stopWorker() {
  w.terminate();
  w = undefined;
}

worker.js에서는 1초마다 'test' 메세지를 브라우저로 보내주고,

웹페이지에서는 해당 메세지를 받아 작업을 처리합니다.

 

w.terminate() 를 통해 작업중이던 Web Worker를 중지 시킨뒤,

undefined로 메모리에서 해제시킵니다.

 

 

Ref

boxfoxs.tistory.com/294

realmojo.tistory.com/109