Web Workers 성능개선

요즘 성능개선에 대해 고민이 많은데, 구글링을 하면 웹워커를 사용한 예시가 늘고 있다. 이에대한 궁금증 해소차원 웹워커에 대해 작성해봅니다.

웹워커가 무엇인가?

• 어플리케이션에서 백그라운드 작업을 실행할 수 있도록 해주는 브라우저 기능
• 웹워커는 메인 스레드와 비동기적으로 통신한다.

언제 웹워커를 사용하지?

• 복잡한 계산 작업: 대규모 데이터 처리, 복잡한 수학 연산 등의 CPU 집약적인 작업을 처리할 때.
• 실시간 데이터 처리: 실시간으로 많은 데이터를 수신하고 처리해야 하는 애플리케이션에서 메인 스레드의 부하를 줄일 때.
• 비동기 작업: 네트워크 요청, 파일 읽기/쓰기 등의 비동기 작업을 워커에서 처리하여 메인 스레드가 항상 사용자 인터페이스에 반응할 수 있도록 할 때.
• 큰 이미지 처리: 큰 이미지의 로딩이나 처리를 백그라운드에서 수행할 수 있고, 이미지를 처리 동안에도 애플리케이션을 자유롭게 사용 할 수 있다.

웹 워커를 사용하면 메인 스레드가 차단되지 않아서 사용자 경험이 개선된다.

🤔 어떻게 사용하지(How To Use)

워커스크립트 작성

// worker.js
self.onmessage = function(e) {
    const result = e.data * 2;  // 간단한 예시 작업
    postMessage(result);
};

리액트에서 사용

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
    const [workerResult, setWorkerResult] = useState(null);

    useEffect(() => {
        const worker = new Worker(new URL('./worker.js', import.meta.url));

        worker.onmessage = function(e) {
            setWorkerResult(e.data);
        };

        worker.postMessage(10); // 워커에 메시지 전송

        return () => {
            worker.terminate(); // 컴포넌트 언마운트 시 워커 종료
        };
    }, []);

    return (
        <div>
            <p>워커 결과: {workerResult}</p>
        </div>
    );
};

export default MyComponent;

👍🏻 웹 워커의 장점

• UI 반응성 향상: 긴 연산 작업을 웹 워커에서 처리하면 메인 스레드가 차단되지 않아 UI가 부드럽고 반응성이 좋아집니다.
• 멀티스레드 처리: 복잡한 계산이나 데이터 처리를 별도의 스레드에서 병렬로 처리할 수 있어 성능이 향상됩니다.
• 메인 스레드 경량화: 웹 워커를 사용하여 메인 스레드의 작업 부담을 줄여 전체 애플리케이션 성능을 개선할 수 있습니다.

👎🏻 웹 워커의 단점

• 복잡성 증가: 웹 워커를 사용하면 코드가 복잡해질 수 있으며, 디버깅도 어려워질 수 있습니다.
• 제한된 기능: 웹 워커 내에서는 DOM 조작이 불가능하며, 일부 웹 API를 사용할 수 없습니다.
• 데이터 전송 비용: 메인 스레드와 웹 워커 간의 데이터 전송 시 복사가 발생하여 큰 데이터를 전송할 때 성능에 영향을 줄 수 있습니다.
• 구현 잘못하면 메모리릭 발생

웹 워커를 사용할 때 메모리릭 방지법

웹워커를 사용하다보면, 메모리가 더이상 필요하지 않음에도 불구하고 해제되지 않아 메모리 공간이 줄어드는 현상이 있다. 이를 방지하기 위한 방법은

• 웹 워커 종료 : 더이상 필요하지 않은 웹 워커는 반드시 terminate() 메서드를 호출하여 종료

useEffect(() => {
    const worker = new Worker('worker.js');
    // 작업 완료 후 또는 컴포넌트 언마운트 시
    return () => {
        worker.terminate();
    };
}, []);

• 전송할 데이터 최소화 : 메인 스레드와 웹 워커간에 주고받는 데이터의 크기와 빈도를 최소화

  // 예시: ArrayBuffer를 사용하여 큰 데이터 전송
  const buffer = new ArrayBuffer(1024);
  worker.postMessage(buffer, [buffer]);