240518 리액트 스터디 : 자바스크립트 이벤트 루프

 

✓ 스레드

- 자바스크립트는 원래 개별/싱글 스레드 -> 메인 스레드 이벤트 루프가 싱글 스레드

- 브라우저(window)에 멀티 스레드를 탑재  

-> JS를 실행하는 환경이 멀티 스레드인 것  cf. Node.js도 마찬가지로 JS 구동 환경이나 라이브러리임

 

✓ 자바스크립트 엔진

- 메모리 힙 : 참조(배열, 객체, 함수) 데이터 저장, 메모리 할당, 가비지 컬렉터

- 콜 스택 : 원시 데이터 저장, 실행 컨텍스트, 싱글 스레드 

 

✓ Web API

- Web API가 DOM을 조작해서 Stack구조를 편하게 사용할 수 있게 도와줌

JavaScript Engine 메모리 힙 콜스택

Event Loop 콜 스택과 큐를 이어주는 역할 콜 스택이나 큐가 비어있는지 확인

Browser Web API 마이크로 태스크 큐(priority 1) 태스크 큐 애니메이션 프레임 큐

- 이벤트 루프는 태스크 큐에서는 1개씩 실행시키는 것에 반해, 마이크로 태스크 큐는 큐가 전부 비워져야 이벤트 루프가 멈춤

 

✓ 애니메이션 프레임 큐

- 애니메이션 프레임 큐는 60 프레임마다 다시 화면을 그림

- requestAnimationFrame(callback) 함수로 1초에 60번 동작, 무한 호출되지 않고 1초에 60번만 호출됨

-> 이후 callback 함수를 호출하고, 다 실행한 뒤 layout(css som)을 그림

cf) requestAnimationFrame()은 JS 파일이랑 같이 페인팅, 원래는 JS를 만나면 멈추나 콜스택 원리로 가능

 

✓ 브라우저 렌더링 단계 - CSS관점

1) requestAnimationFrame()

2) Layout : CSSOM, css tree를 만드는 단계, html 계산 // Reflow : Layout 단계 다시 실행

3) Paint : CSSOM + DOM 합치는 단계, css 계산

4) Composite : 브라우저에 출력하는 단계, 레이어 간 합성 개념(이전에는 한 레이어에서 하는 방식)

✓ display / hidden / ::before

- display: none; 속성 사용시 DOM에서 노드 생성 X

- hidden: true; 속성 사용시 노드 생성 O 

- ::before 속성 사용 시 노드 생성 X, 레이아웃은 만듦

 

✓ tip

- css 속성 중 top과 같은 속성은 구조를 다시 짜서 reflow

- transition과 같은 속성을 사용하면

 

✓ setTimeout 실행 단계

1) 콜 스택에서 setTimeout 실행

2) setTimeout 내부 콜백 함수는 Timer API(Web API)로 이동

3) 타임아웃되면 콜백 함수가 태스크 큐로 이동

4) 콜 스택이 비면 태스크 큐에 있는 콜백 함수를 콜 스택으로 가져와 실행

 

✓ References

- 이벤트 루프 : https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리

- 렌더링 : https://d2.naver.com/helloworld/5237120