Web Workers API 웹쓰레드

웹 워커 API는 웹 페이지가 메인 스레드와 별도로 백그라운드에서 스크립트를 실행할 수 있도록 하여 웹 페이지의 성능과 응답성을 향상시킬 수 있다. 이것은 특히 사용자 인터페이스를 동결하지 않고 이미지 처리, 데이터 조작 및 대량 계산과 같은 장기 실행 또는 계산 비용이 많이 드는 작업을 실행하는 데 유용하다.

worker.js라는 새 JavaScript 파일을 만든다.

  self.addEventListener("message", function(e) {
    var data = e.data;
    // Perform a long-running task here
    var result = performLongRunningTask(data);
    // Send the result back to the main thread
    self.postMessage(result);
  });

기본 HTML 파일에서 새 작업자를 만들고 시작한다:

<script>
  var worker = new Worker("worker.js");
  worker.addEventListener("message", function(e) {
    console.log("Worker finished: ", e.data);
  });
  worker.postMessage("Start working");
</script>

이 예에서는 먼저 작업자 스크립트 파일 "worker.js"의 경로를 인수로 전달하여 새 작업자 개체를 만들고, 그런 다음 작업자 스크립트의 메시지를 청취하기 위해 작업자 개체에 이벤트 수신기를 설정한다. 작업자 스크립트는 self.postMessage() 메서드를 사용하여 오래 실행된 태스크의 결과와 함께 메시지를 기본 스레드로 다시 보낸다.

web work들은 DOM에 접근할 수 없고 브라우저의 API 중 일부를 사용할 수 없으며 메시지를 통해서만 메인 스레드와 통신할 수 있다.