브라우저의 메인 스레드는 비싸다

브라우저 성능의 핵심은 ‘메인 스레드’를 어떻게 사용하는가에 달려 있다 프론트엔드 성능 문제는 단순히 코드가 느려서가 아니라, JavaScript·렌더링·이벤트 처리가 메인 스레드를 장시간 점유하기 때문에 발생하는 경우가 많음. 해결책은 크게 메인 스레드 안에서 작업을 효율적으로 배분하는 방법과 작업을 메인 스레드 밖으로 옮기거나 제거하는 방법으로 나뉨. 핵심 원칙은 작업을 분할(Splitting), 배치(Batching), 우선순위화(Prioritizing), 지연(Deferring) 하고, 필요하면 Compositor·Web Worker를 활용하며 불필요한 작업 자체를 없애는 것임. 서론 | 메인 스레드가 막히면 UI도 멈춤 브라우저의 메인 스레드는 JavaScript 실행뿐 아니라 이벤트 처리, 스타일 계산, 레이아웃, 화면 렌더링 등 많은 작업을 담당함. 60Hz 화면에서는 프레임 하나에 약 16.6ms가 주어지며, 실제 작업에 사용할 수 있는 시간은 더 짧아 긴 작업이 발생하면 스크롤·입력·애니메이션이 끊김. 따라서 성능 최적화의 핵심은 단순 실행 속도보다 메인 스레드를 얼마나 오래 점유하는지를 관리하는 데 있음. 본론 1. 긴 작업은 잘게 나눠 사용자 응답성을 확보함 Splitting은 큰 작업을 여러 작은 작업으로 나누고 중간마다 메인 스레드를 반환하는 방식임. 실시간 채팅처럼大量의 DOM 작업이 한꺼번에 발생할 경우, 일정 단위로 작업을 끊으면 그 사이에 입력과 화면 갱신을 처리할 수 있음. 작업 총량이 줄어드는 것은 아니지만 사용자가 느끼는 응답성과 화면 부드러움은 크게 개선됨. 단, 지나치게 잘게 나누면 스케줄링 오버헤드가 커질 수 있으므로 적절한 단위가 필요함. 2. 반복 작업은 묶어서 처리해 처리량을 높임 Batching은 너무 자주 발생하는 작업을 모아 한 번에 처리하여 반복 비용을 줄이는 방식임. 입력·스크롤·리사이즈 이벤트에는 debounce·throttle을 적용하고, DOM 변경이나 상태 업데이트도 가능한 한 묶어서 실행할 수 있음. 이는 단일 작업이 너무 긴 문제를 해결하는 Splitting과 달리, 작업 빈도가 너무 높은 문제와 backpressure를 줄이는 데 목적이 있음. 3. 사용자에게 중요한 작업을 먼저 처리함 Prioritizing은 모든 작업을 동일한 순서로 처리하지 않고 현재 사용자 행동과 직접 관련된 작업을 우선 실행하는 방식임. 예를 들어 여러 사진의 미리보기...