FE 개발자의 성장 스토리 09: OffscreenCanvas 적용기
·2021.06.02 00:00
OffscreenCanvas를 활용하여 메인 스레드의 부하를 줄이고 렌더링 성능을 개선한 사례를 다룬다.
브라우저의 메인 스레드는 UI 렌더링과 사용자 이벤트 처리를 담당하므로, 복잡한 그래픽 연산이 수행될 경우 화면 끊김 현상이 발생할 수 있다.
OffscreenCanvas를 도입하면 캔버스 렌더링 작업을 Web Worker로 위임할 수 있어, 메인 스레드의 점유율을 낮추고 부드러운 사용자 경험을 제공할 수 있다.
주요 적용 과정은 다음과 같다:
canvas.transferControlToOffscreen()을 통한 제어권 이전- Web Worker 내에서 렌더링 로직 수행
- 메인 스레드와 워커 간의 메시지 통신을 통한 데이터 전달
이 요약은 원문 이해를 돕기 위한 큐레이션입니다. 저작권은 원저작자에게 있으며, 정확한 내용과 맥락은 원문을 확인하세요.
요약 오류, 출처 표기 문제, 삭제 요청은 문의 · 건의로 알려주세요.