브라우저 메인 스레드, 왜 이렇게 느릴까?

AI 요약

이 글은 브라우저 메인 스레드가 느려지는 근본 원인과 해결 방안을 다룬다. 메인 스레드는 JavaScript 실행과 화면 렌더링이라는 두 가지 핵심 작업을 모두 처리하는데, 대부분의 코드 최적화 노력과 달리 실제 성능 저하의 원인은 코드 속도가 아니라 메인 스레드에 과도하게 집중된 작업 부하라는 점을 지적한다. 60Hz 디스플레이 기준 프레임당 16.6ms의 예산 중 브라우저 자체 처리 비용을 제외하면 실질적으로 사용할 수 있는 시간은 더 적다.

핵심 포인트

• 메인 스레드는 JavaScript 실행(이벤트 핸들러, 타이머, 네트워크 콜백 포함)과 화면 렌더링 파이프라인 전반을 담당
• 60Hz 디스플레이 기준 프레임당 약 16.6ms 예산, 브라우저 자체 비용 제외 시 실질 예산은 더 축소
• 스크롤, 애니메이션, 입력 처리가 겹치는 인터랙션 많은 화면에서 메인 스레드 블로킹이 발생
• 코드 속도 문제가 아니라 메인 스레드에 집중된 작업량 자체가 병목의 핵심 원인

향후 전망

• 메인 스레드 부하 분산을 위한 웹 워커, 컴포저 스레드 활용 등 아키텍처 차원의 최적화 중요성 증가
• 프레임 렌더링 파이프라인 중 컴포지팅만 별도 스레드에서 처리되는 구조적 특성을 활용한 최적화 전략 필요