비활성화 탭 에서도 끄떡없는 애플리케이션 만들기: 웹 워커의 활용

브라우저는 늘 최적화 하기 위해 노력합니다. 가령 탭이 비활성화 될때에는 해당 탭의 CPU 및 메모리 자원을 줄입니다. 이렇게 확보한 리소스는 현재 활성화된 탭에 모두 투입해 최적의 성능을 보여줍니다. 이런 최적화를 사용자 경험을 향상시키지만, 개발자 입장에서는 애플리케이션의 백그라운드 동작을 예측하기 어렵게 만드는데요. 그런데 만약 비활성화 된 탭에서 중요한 계산 로직이 실행되어야 한다던가, 사용자 세션과 같은 시간에 민감한 기능의 정확성을 유지 하여야 한다면 어떻게 될까요? 이러한 문제를 효과적으로 해결할 수 있는 도구가 웹 워커(Web Worker) 입니다. 웹 워커는 상대적으로 오래된 기술이지만, 실무에서 사용할 일이 많지는 않은데요. 웹 워커는 싱글스레드인 자바스크립트 한계를 극복 하기 위해 등장하였습니다. 메인 JavaScript 스레드와는 별도로 독립적인 실행환경 에서 작동하므로, 브라우저의 비활성 탭 정책에 영향을 받지 않습니다. 구현 방법은 메인스레드와 웹워커는 이벤트 기반 메세지로 통신하기 때문에 메인스레드와 웹 워커는 postMessage, onmessage 를 통해 데이터를 주고 받습니다. 이런 데이터 전송 메커니즘은 구조화된 클론(Structured Clone) 알고리즘을 사용하기 때문에 함수나, DOM 노드는 전달이 불가합니다. 따라서, 메인스레드와 웹 워커는 직렬화된 데이터만 주고받고, DOM 조작이 필요한 경우는 메인 스레드에서 처리합니다. 이를 통해 웹 워커의 격리된 특성을 유지하면서 효율적인 데이터 교환이 가능합니다. https://velog.io/@wowba/%EC%9B%B9-%EC%9B%8C%EC%BB%A4web-worker%EB%A1%9C-%ED%83%80%EC%9D%B4%EB%A8%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0