Tistory
브라우저가 자바스크립트 타이머를 스로틀링(throttle) 하는 이유는 무엇일까요?
브라우저가 JavaScript의 setTimeout, setInterval 등의 타이머를 의도적으로 스로틀링하는 이유와 그 메커니즘을 설명합니다. 특히 비활성 탭(background tab)이나 숨겨진(hidden) 페이지에서 타이머의 최소 지연 시간이 증가하는 방식과 배터리 절약, 성능 최적화를 위한 브라우저의 정책을 다룹니다.
핵심 요약
이 아티클은 브라우저 내부 동작를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 브라우저가 JavaScript의 setTimeout, setInterval 등의 타이머를 의도적으로 스로틀링하는 이유와 그 메커니즘을 설명합니다. 특히 비활성 탭(background tab)이나 숨겨진(hidden) 페이지에서 타이머의 최소 지연 시간이 증가하는 방식과 배터리 절약, 성능 최적화를 위한 브라우저의 정책을 다룹니다. 이 동작을 이해하는 것은 타이머 기반 애니메이션, 실시간 기능, 웹 워커를 활용한 백그라운드 작업을 설계할 때 매우 중요합니다.
이 아티클은 브라우저 내부 동작를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
브라우저 내부 동작를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 브라우저는 비활성 탭에서 타이머 최소 간격을 1ms에서 1000ms(1초)까지 늘려 CPU 및 배터리 사용량을 줄입니다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
브라우저는 비활성 탭에서 타이머 최소 간격을 1ms
브라우저는 비활성 탭에서 타이머 최소 간격을 1ms에서 1000ms(1초)까지 늘려 CPU 및 배터리 사용량을 줄입니다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
브라우저는 비활성 탭에서 타이머 최소 간격을 1ms를 개념으로만 기억하고 맥락 없이 적용하면 브라우저는 비활성 탭에서 타이머 최소 간격을 1ms에서 1000ms(1초)까지 늘려 CPU 및 배터리 사용량을 줄입니다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
Page Visibility API의 visibil
Page Visibility API의 visibilitychange 이벤트를 통해 탭의 활성화 상태를 감지하고 타이머 동작을 조정할 수 있습니다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Page Visibility API의 visibil를 개념으로만 기억하고 맥락 없이 적용하면 Page Visibility API의 visibilitychange 이벤트를 통해 탭의 활성화 상태를 감지하고 타이머 동작을 조정할 수 있습니다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
Chrome
Chrome, Firefox, Safari 등 브라우저마다 스로틀링 기준과 동작 방식이 다를 수 있습니다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Chrome를 개념으로만 기억하고 맥락 없이 적용하면 Chrome, Firefox, Safari 등 브라우저마다 스로틀링 기준과 동작 방식이 다를 수 있습니다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"브라우저가 자바스크립트 타이머를 스로틀링(throttle) 하는 이유는 무엇일까요?"의 멘탈 모델과 요약을 먼저 읽고, 브라우저 내부 동작와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
브라우저가 자바스크립트 타이머를 스로틀링(throttle) 하는 이유는 무엇일까요?에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 브라우저 내부 동작와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "setTimeout의 지연 시간이 정확하지 않을 수 있는 이유를 설명하고, 이를 해결하거나 보완하는 방법을 제시해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "브라우저가 자바스크립트 타이머를 스로틀링(throttle) 하는 이유는 무엇일까요?에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 이벤트 루프의 태스크 큐 처리 방식, 브라우저 스로틀링, 시스템 부하, requestAnimationFrame 또는 Web Worker 활용을 생각해보세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "브라우저가 자바스크립트 타이머를 스로틀링(throttle) 하는 이유는 무엇일까요?에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 매크로 태스크(macrotask)와 마이크로 태스크(microtask) 큐의 차이, Promise가 마이크로 태스크로 처리됨을 생각해보세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "브라우저가 자바스크립트 타이머를 스로틀링(throttle) 하는 이유는 무엇일까요?에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] Web Workers, SharedWorker, Service Worker, 서버에서 푸시 알림을 통한 타이밍 처리 방식을 생각해보세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"브라우저는 비활성 탭에서 타이머 최소 간격을 1ms"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.