Web Worker로 UI 멈춤 문제 해결하기

WebWorker

1. Web Worker란? 🤔

웹 애플리케이션을 개발할 때, 무거운 연산 작업이 있으면 브라우저가 응답하지 않는 경우가 있다. 이를 방지하기 위해 Web Worker가 사용된다. Web Worker는 백그라운드에서 실행되어 UI가 멈추는 현상을 줄일 수 있다.

---

2. JavaScript의 Single Thread와 화면 멈춤 문제 🛑

JavaScript는 기본적으로 Single Thread 방식으로 동작한다. 즉, 하나의 작업이 끝나기 전까지 다음 작업을 수행할 수 없다. 이를 **메인 스레드(기본 실행 컨텍스트)**에서 실행된다고 표현한다.

아래 코드처럼 무거운 연산을 실행하면 브라우저 UI가 멈추는 현상이 발생한다.

// 긴 연산 수행 (UI 멈춤 현상 발생)
function heavyComputation() {
  let sum = 0;
  for (let i = 0; i < 1_000_000_000; i++) {
    sum += i;
    if (i % 100_000_000 === 0) console.log("현재 진행: ", i);
  }
  console.log("연산 완료: ", sum);
}

document.querySelector("button").addEventListener("click", () => {
  console.log("버튼 클릭! 하지만 UI는 멈춤...");
});

heavyComputation(); // 실행하면 UI가 멈춘다

위 코드를 실행하면 연산이 끝날 때까지 UI가 멈춘다. 버튼을 클릭해도 반응하지 않으며, 웹 페이지가 '응답 없음' 상태가 될 수도 있다.

---

3. Web Worker로 해결하기

Web Worker를 사용하면 무거운 연산을 메인 스레드가 아닌 별도의 백그라운드 스레드에서 실행할 수 있다. 이를 통해 UI 멈춤 현상을 방지할 수 있다.

3.1 Web Worker 파일 생성 (worker.js)

// worker.js
self.onmessage = function (event) {
  let sum = 0;
  for (let i = 0; i < 1_000_000_000; i++) {
    sum += i;
    if (i % 100_000_000 === 0) console.log("현재 진행: ", i);
  }
  console.log("연산 완료: ", sum);
  postMessage(sum);
};

3.2 메인 스크립트에서 Web Worker 호출 (main.js)

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

document.querySelector("button").addEventListener("click", () => {
  console.log("버튼 클릭! UI 반응 정상!");
});

worker.postMessage("start");
worker.onmessage = function (event) {
  console.log("연산 결과: ", event.data);
};

이제 실행해보면 UI가 멈추지 않고, 버튼도 정상적으로 클릭할 수 있다! 🎉

---

4. Web Worker의 장점 ✅

✅ UI 멈춤 현상 방지: 무거운 연산을 백그라운드에서 실행하여 사용자 경험을 개선한다. ✅ 멀티 스레드 활용: 브라우저의 메인 스레드와 별도로 실행되어 성능을 높일 수 있다. ✅ 비동기 처리: postMessage()를 통해 데이터를 주고받으며 비동기적으로 실행된다.

---

5. Web Worker 사용 시 주의할 점 ⚠️

• DOM 조작 불가: Worker 내부에서는 document를 직접 조작할 수 없다.
• 파일 경로 문제: Worker 파일은 같은 도메인에서 실행되어야 한다.
• 데이터 전송 비용: postMessage()를 사용할 때, 데이터 크기가 클 경우 성능에 영향을 줄 수 있다.

---

6. 요약 📌

JS는 기본적으로 싱글 스레드라서 긴 연산이 실행되면 UI가 멈추는 문제가 발생할 수 있다. Web Worker를 사용하면 백그라운드에서 연산을 처리하여 UI 멈춤 문제를 해결할 수 있다.

---

6. 참고 자료 🔔

• MDN Web Worker 문서
• HTML5 Rocks 튜토리얼
  
• Web Worker 간단 정리
  
• Web worker로 성능 향상시키기
• 대규모 데이터 빠르게 처리하기

 

Web Workers API - Web APIs | MDN

 

웹 작업자를 사용하여 브라우저의 기본 스레드에서 자바스크립트 실행  |  Articles  |  web.dev