[JavaScript] 자바스크립트 백그라운드에서 스크립트 작업하기

234_자바스크립트 백그라운드에서 스크립트 작업하기

[적용]

• 부하가 큰 처리를 실행하고 싶을 때

---

[문법]

메소드	의미	반환
new Worker(파일주소)	웹 워커 인스턴스 생성	인스턴스

---

[내용]

자바스크립트는 메인 스레드로 동작하며, 부하가 큰 작업을 실행하면 처리 작업 중에는 조작이 불가능하다.

자바스크립트 처리가 UI를 담당하는 메인 스레드를 멈추게 하기 때문이다.

웹 워커(Web Worker)를 사용하면 이 문제를 해결할 수 있다.

웹 워커는 메인 스레드의 자바스크립트와 분리되어 실행되며, 부하가 큰 계산 작업 등을 처리할 때 유용하다.

웹 워커는 메인 스크립트와 스레드가 다르므로 DOM 조작이 불가능하며, 페이지가 열려 있을 때만 실행된다는점에 주의하자.

 

웹 워커와 메인 스레드는 postMessage()를 사용해 메시지를 전송하고, onmessage 이벤트 핸들러로 데이터를 반환하며,

해당 데이터에는 onmessage 이벤트 data 속성에 보관된다.

 

HTML                                                                                                                                                              index.html

<div class="wrap">
  <input type="number" value"1" id="numA" /> +
  <input type="number" value="2" id="numB" /> =
  <span class="result"></span>
</div>
<button>계산하기</button>

JavaScript                                                                                                                                                          main.js

// 참조 가져오기
const numA = document.querySelector('#numA');
const numB = document.querySelector('#numB');
const result = document.querySelecotr('.result');
const btn = document.querySelector('button');

// worker 생성
const worker = new worker('worker.js');

// 버튼 클릭 시
btn.addEventListener('click', () => {
  worker.postMessage([Number(numA.value), Number(numB.value)]);
  console.log('[메인스크립트] worker로 데이터 전송');
});

// worker 데이터를 가져올 때
worker.onmessage = function(e) {
  // 결과를 화면에 표시
  result.textContent = e.data;
  console.log('[메인스크립트] worker에서 메시지 가져오기');
};

onmessage = (e) => {
  console.log('[worker]메인스크립트의 데이터 가져오기');
  
  // 덧셈 계산
  const result = e.data[0] + e.data[1];
  
  console.log('[worker]메인스크립트로 데이터 전송');
  postMessage(result);
};

JavaScript                                                                                                                                                          worker.js

onmessage = (e) => {
  console.log('[worker]메인스크립트의 데이터 가져오기');
  
  // 덧셈 계산
  const result = e.data[0] + e.data[1];
  
  console.log('[worker]메인스크립트로 데이터 전송');
  postMessage(result);
};

main.js와 worker.js는 별도의 파일로 생성해야 한다.

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김