이벤트 루프를 그려본다면?
이벤트 루프 => 싱글 스레드로 동작하는 js에서 비동기 동작의 처리를 가능하게 해주는 교통 정리 시스템
이벤트 루프의 실행순서
1. callstack에 쌓인 실행컨텍스트를 실행
2. callstack이 비워짐
3. microtaskQueue를 확인하고 비워질때까지 실행
4. macroTaskQueue에 있다면 하나만 실행
5. 다시 callstack 확인 후 비우기 시작
macroTaskQueue에 쌓이는 친구들은 대표적으로 setTimeout
micrtoTaskQueue에 쌓이는 친구들은 대표적으로 promise, queueMicroTaskQueue
js로 이 함수가 실행이되면 어떻게 될까?
그러기 위해서 잠깐 html 렌더링 과정을 살펴보고 와야 한다
html 문서는 위의 그림처럼 파싱이 되고 화면에 그려지게 된다
js로 위의 함수가 실행이 되면 함수의 실행에 따라 microTask 혹은 macroTask에 쌓이게 된다
이때 중요한 것은 MacroTaskQueue는 하나의 큐만 비우고 이후 과정을 실행한다
그리고 콜스택과 마이크로 태스크큐를 싹 비운다
그 다음에
브라우저가 렌더링을 할지 말지를 결정한다
이때 중요한 것이 시간이다
화면은 ux를 위해 60frame을 준수해야 하고 16ms마다 렌더링이 된다(필요하다면)
이래서 앞의 과정 microTaskQueue가 오래점유하고 있거나 콜스택이 오래 실행이 된다면 렌더링은 제때 일어나지 못하고
사용자에게는 버벅이는 과정이 일어난다
여기서 렌더링 직전에 실행되는 함수가 RAF(RequestAnimationFrame)이다
raf를 사용하면 렌더링 직전에 콜백이 실행되므로
사용자에게 좀 더 부드러운 경험을 제공하려면 raf 함수를 사용하는 것이 좋다
