용어 사전 coding 용어 페이지

requestAnimationFrame

다음 프레임에 맞춰 측정·애니메이션 코드를 실행하는 브라우저 API

request-animation-frame #performance#javascript

English version

다른 이름

rAFrequestAnimationFrame

관련 개념

레이아웃 스래싱 IntersectionObserver

핵심 아이디어

requestAnimationFrame은 브라우저가 다시 그리기 직전에 코드를 실행해, DOM 읽기·쓰기를 프레임 경계에 맞출 수 있게 합니다. 같은 프레임에서 측정과 렌더를 모두 진행하면 불필요한 리플로를 줄일 수 있습니다.

이 블로그에서의 역할

Mathbong의 성능 파트는 레이아웃 스래싱을 막는 수단으로 rAF를 소개합니다. 관찰자, 지연 로딩, 부분 갱신과 결합해도 일정한 프레임 속도를 유지하도록 돕는 핵심 빌딩 블록입니다.

이 개념을 다루는 글

[JavaScript 시리즈 17편] 퍼포먼스 기초: 페인트·리플로와 지연 로딩 렌더링 단계, layout thrashing 방지, 이미지 지연 로딩, 관찰자 API로 성능을 지키는 방법을 다룹니다.[JavaScript Series 17] Performance Basics: Paint, Reflow, and Lazy Loading Understand how the browser draws web pages, learn how to prevent common layout slowdowns, and apply lazy loading with easy-to-follow code.