웹 브라우저 프레임 원리?

JavaScript
1

안녕하세요. 웹 성능에 관해서 여러 글들을 봤습니다.
이론적인 설명으로는 어느정도 이해가 가능한데, 약간 실제 실무의 상황과 결합해보니 이해가 잘 되지 않는 부분들이 있네요

우선 웹 브라우저는 렌더링을 60프레임을 맞추기 위해서 request animation frame을 사용하라 하고, request animation frame 실행 이후에 렌더링이 이루어진다고들 합니다.

근데 궁금한것은 request animation frame은 비동기 함수이고, 해당 함수는 태스크 큐에 들어갑니다.
콜스택에 의해 스택의 함수가 먼저 처리가 된 이후 태스크 큐의 함수를 꺼내서 실행시키게 되는데, 여기서 스택에서 긴 작업이 이루어 지면 이 16ms에 맞추는것이 어려워질것 같은데 어떻게 확신을 하는것일까요?

심지어 request animation frame는 micro task 보다 우선순위가 낮다고 알고 있는데, 그렇다면 Promise.resolve 이후에 실행된다는 것인데 더욱 더 16ms에 맞추기 어렵지 않을까요??

2

당연히 60 프레임 못 맞추는 경우가 발생합니다.
그래서 그래픽 관련 작업을 할때는 FPS 측정(Frame rate - Firefox Developer Tools | MDN) 이 필수이지요.
request animation frame 하고 micro task 하고 비교하는 것은 의미가 없습니다.
request animation frame 으로 60 프레임을 못 따라간다는 것은 콜백의 실행시간이 16 ms 가 넘는다는 거고 그건 실행 순서하고 상관없습니다.
결국 중요한 것은 콜백을 효율적으로 작성해서 16 ms 안넘게 잘 짜는것입니다.