event loop

• 이벤트루프?

  • 브라우저 내에서 비동기 작업을 처리하는 싱글 스레드 JavaScript의 메커니즘
  • execution of code(코드 실행), processing Queue tasks(큐 작업 프로세싱), coordinating Rendering Pipeline(렌더링 작업 조정)

• 구성요소?

  • CallStack: 동기 JS 코드 실행하는 메인 스레드 콜스택
  • MicroQueue: 우선순위가 높은 작업들로, Promise.then, async/await, MutationObserver의 callback 저장
  • MacroQueue(Task Queue): setInterval, setTimeout, setImmediate, I/O 작업들의 callback 저장
  • Rendering Steps: Computing Style, Layout, Painting 작업

• 작업순서?

  1. CallStack 처리: 스택이 비워질 때 까지 스택에 쌓인 동기 코드 실행
  2. MicroTaskQueue 처리: Promise 콜백, queueMicroTask 등 높은 우선순위 작업 처리 (만약 새로운 마이크로 태스크카 추가되면, 즉시 처리. 이 단계가 완료될 때 까지 넘어가지 않음)
  3. MacroTaskQueue 처리: setTimeout, setInterval, I/O event 등 비동기 콜백 처리 (하나의 작업을 가져와 콜 스택으로 이동시켜 실행, 한번의 루프에서 매크로 테스크는 단 하나만 처리.)
  4. RenderingOpportunity: 브라우저가 화면을 업데이트 할 기회를 확인.

  • rAF callback 실행: 다음 프레임 렌더링 전 애니메이션 관련 작업 수행

  • Style Calculations: CSS Style 계산

  • Layout: DOM요소의 위치와 크기 계산

  • Paint: 화면에 Pixel Render

    렌더링은 디스플레이의 새로고침 주기(예: 60Hz, ~16.67ms)에 맞춰 발생하며, 브라우저가 필요하다고 판단하지 않으면 생략될 수 있습니다.

  5. 콜스택 확인 → 마이크로테스크 큐 확인 및 모두 실행 → 매크로 큐 테스크 재확인 → 1개만 가져와 콜스택에 넣고 실행 → 렌더링 기회 → 콜스택 확인 → …

• microTask Starvation: microTask가 계속 추가 되면 rAF나 macroTaskQueue작업이 밀릴 수 있음

requestAnimationFrame(rFA)

• rFA?
  • 브라우저의 repaint 직전에 콜백을 실행하여 부드러운 애니메이션을 제공하는 브라우저 API
• Timing - rFA는 이벤트 루프의 렌더링 기회 단계에서 실행되며, 브라우저가 스타일 계산, 레이아웃, 페인팅을 수행하기 직전에 호출. 애니메이션이 디스플레이의 새로고침 주기 (60Hz, 60FPS, 16ms/frame) 와 동기화 되도록 함
• Queue - 애니메이션 콜백 큐가 별도로 존재하여, repaint 전에 우선 실행됨.
• Execution - 현재 프레임에서 큐에 추가된 모든 rAF콜백은 추가된 순서대로 실행되며 브라우저가 프레임을 렌더링 하기 전에 처리함. 한 프레임내에 여러개의 rAF를 호출한다면 Batch 실행(동일 프레임 내). rAF콜백 내에서 큐에 추가된 콜백은 다음 프레임에서 실행.
• Optimization - rAF는 애니메이션 최적화되어 있음. 비활성 탭에서는 실행이 일시 중지 되어, CPU와 배터리를 절약할 수 있음. 디스플레이 새로고침 주기와 동기화되어 jank(깜빡임)를 줄이고 부드러운 애니메이션을 보장함. setTimeout이나 setInterval과 달리 불필요한 repaint를 방지 → 브라우저 새로고침 주기와 동기화.
• One-shot Nature(단일 실행): 기본적으로 반복적이지 않음. 콜백에서 rAF를 다시 호출해야 다음 애니메이션 프레임이 스케줄링 됨.

rAF 주의사항

• 성능 : rAF 콜백이 프레임 예산(16.67ms/frame)을 초과하면 깜빡임 발생 → 무거운 작업이라면 여러 프레임으로 나누거나 chunking기법을 사용
• 컨텍스트: rAF는 윈도우의 렌더링 컨텍스트에 종속되며 Web Worker와 같은 비 UI 환경에서는 사용 불가능.