자바스크립트 지도 엔진에 웹 워커를 적용해봤습니다 - 14편 - 웹 워커, 어디까지 써봤니?

간단 소개

자바스크립트 지도 엔진 TMAP JS에 웹 워커를 적용하여 성능을 개선한 과정과 결과를 설명하고, 웹 워커 활용 팁을 공유합니다.

AI Summary

TMAP JS와 웹 워커
- TMAP JS는 WebGL을 이용한 풀 벡터 방식으로 지도 화면을 표출하는 js 지도 엔진이다.
- 싱글 스레드인 js의 한계를 극복하기 위해 웹 워커를 사용하여 성능을 개선했다.
웹 워커 적용 과정
- 데이터 요청부터 렌더 전처리 과정까지 워커에 위임하고, 메인 스레드와 워커 스레드 간 데이터 통신 시스템을 구축했다.
- Transferable Object 개념을 적용하여 데이터 복사 오버헤드를 줄이고, 우선순위 기반 스케줄링 시스템을 구축하여 사용자 인터랙션에 빠르게 반응하도록 했다.
- 워커 풀링을 통해 자원 사용을 최적화하고, rollup의 code splitting 기능을 이용하여 코드 중복을 최소화했다.
성능 개선 결과
- 웹 워커 도입 후 애니메이션 실행 시 FPS가 향상되었고, 메인 스레드의 유휴 상태가 확보되어 렌더링 성능이 크게 개선되었다.
- Comlink 라이브러리를 활용하면 웹 워커와 메인 스레드 간 변수 공유가 가능하여 워커 사용성을 높일 수 있다.