Queue에서 CallStack 으로 올라갈 시점에서의 rAF, setTimeout콜백의 우선순위 테스트

체크시 RUN 누르고 바로 TEST1 혹은 TEST2 클릭
체크해제시 RUN 누르기
결과는 DevTool의 Console 확인

while for 2s
5번라인에 넣어준 함수가 실행됨으로써 이 함수가 콜스택에 올라가서 함수 안의 코드를 수행하게 된다
일단 6,7,8번라인에서 다양한 방법으로 호출될 콜백함수를 예약해둔다.
예약후 곧바로 while 로 들어가서 2초간 반복을 수행후 콜스택이 종료된다.

10번라인이 없었다면
6번라인의 콜백함수는 "콜스택 일단락" 이후 대략 1ms 후에 실행되고
7번라인의 콜백함수는 "콜스택 일단락" 이후 다음 화면 표시 시점 최대 16ms 이내에 실행되고
8번라인의 콜백함수는 "콜스택 일단락" 이후 바로 실행될것이다

그런데 10번라인이 존재한다
생각해 볼 부분은 10번라인에 의해서 2초간 콜스택에서 바쁘게 반복코드가 진행되는 동안
6, 7, 8번에 담은 콜백함수는 백그라운드에 예정된 시간동안 머무르다가 QUEUE로 이동하게 될지
아니면 "콜스택 일단락" 되기 전까지 백그라운드에서 대기 하고있다가 콜스택 일단락 된 후 QUEUE로 이동하게 될지
그리고 queueMicrotask 의 경우 백그라운드를 거쳐서 갈지 아니면 코드상에서 queueMicrotask 실행과 동시에 바로 QUEUE로 갈지
그리고 2초간 반복중 버튼을 클릭하면 이것의 콜백함수가 QUEUE에 들어갈지, 들어간다면 들어가는 시점은 언제인지 그리고 우선순위는 어떻게 될지
와 같은것들에 대해 고민해보고자 한다.

그래서 그냥 이러한 부분을 위와 같은 코드를 통해 실험을 통해서 알아보고자 한다.
그래서 실험으로 확인한 부분은

1. 2초 while이 없었다면 높은 확률로 timeout이 raf보다 먼저 찍히는 코드이다
   크롬 기준으로 timeout는 대략 1~2ms raf는 다음 화면갱신시점에 수행되며 그 시점은 실행 후 최대 16ms(1/60) 이후 시점이다
   즉 1~2/(16의 중간값인 8) 의 확률로 raf가 timeout 보다 먼저 찍힐 수 있는 코드이다.
   왜 16의 중간값이냐하면 코드가 수행되는 시점과 다음 rAF 콜백의 시점이 나올 확률을 기반으로 한 것이다.

2. 그런데 2초 while을 두게될때
   가정1. "콜스택 일단락" 이전에 6, 7번의 콜백함수가 백그라운드에서 QUEUE로 이동할 때
      이 경우는 2초 while이 실행중인 상황에 이미 QUEUE에 들어서게 된다는 말이다.
      settimeout콜백이 1~2ms간 백그라운드에 머물고 queue에 들어가고 raf콜백이 10ms간 백그라운드에 머물고 queue에 들어간다 하더라도
      "콜스택 일단락" 이후에 QUEUE에 raf콜백, settimeout콜백 둘다 준비되어있는 상태라는 의미이다.
      이 상황에서 둘중 우선순위가 높은것을 콜스택에 올리게 될것인데 실험 결과 raf가 항상 먼저 나온다.

   가정2. "콜스택 일단락" 이후에 6, 7번의 콜백함수가 이미 시간이 만료된것으로 판단되어져 백그라운드에서 QUEUE로 이동할 때
      이 경우도 결국 생각해보면 가정1의 상황과 같을것이라 생각된다

   가정3. "콜스택 일단락" 이후에 6, 7번의 콜백함수가 시간이 카운팅이 시작되어 백그라운드에서 QUEUE로 이동할 때
      이 경우는 2초 while을 두지 않았을때와 같은 작동을 해야한다. 그러나 실험결과 그렇지 못하다.

   실험의 결과 가정3은 아닐것으로 생각되며 가정1 혹은 가정2 둘중에 하나의 방식으로 작동될것으로 생각되며
   둘중 어떤 방식이더라도 개발자입장에서는 코드의 흐름은 같을 것 (어찌되도 상관없을 것)이라 생각된다.
   한가지 고려할 점은 단지 실험을 통해 얻은 결과일 뿐이라서 이 상황에서는 항상 raf가 먼저 나오는것으로 보장되어있는 것인지에 대해서는 조심스럽게 접근할 필요가 있다.

3. queueMicrotask 의 경우 백그라운드를 거쳐서 갈지 아니면 코드상에서 queueMicrotask 실행과 동시에 바로 QUEUE로 갈지
   이것 또한 어찌되도 개발자 입장에서는 흐름을 제어하는데 있어서는 상관이 없다
   그냥 콜스택이 비워졌을때 Microtask가 올라간다는 점은 변함없으니까

4. 2초간 반복중 버튼을 클릭하면 이것의 콜백함수가 QUEUE에 들어갈지, 들어간다면 들어가는 시점은 언제인지 그리고 우선순위는 어떻게 될지
   이것에 대한 결과는 흥미롭다.
   크롬에서는 클릭의 콜백함수가 raf보다 먼저 나오며 두번누르면 두번 모두 실행된다.
   사파리에서는 클릭의 콜백함수가 timeout보다 먼저나오기도, 나중에 나오기도 한다.