JavaScript engine basic2

이전글

2023.03.12 - [0x00 공부/Browser] - JavaScript engine basic1

 

JS concurrency

JavaScript를 짤때 생각해봐야되는게 JS가 Single thread synchronous language 라는 것이다.

JS Engine에는 memory heap과 call stack이 주요 구성 요소이고, call stack에서 함수를 하나씩 push 하면서 한 번에 하나의 작업을 수행한다.

 

JS Concurrency

그런데 Single Thread이면 위와 같은 모습이 나오면 안된다.

call stack에는 순서대로 들어가고, 실행은 Single Thread로 되는데, 출력은 1-3-2-4-5가 나오는 asynchrnous를 보여준다.

 

웹 페이지를 로딩하는데, 특정 작업에 시간이 많이 걸릴경우 이 동작이 끝날때 까지 화면이 나오지 않거나, 기능이 작동하지 않으면 사용자에게 불편함을 주기 때문에 요청을 보냈을때 응답에 관계없이 그 다음 코드를 실행한다.

이런 측면에서 JS는 마치 코드를 동시에 실행하는 것 처럼 보이는 동시성(concurrency)를 지닌다.

 

How to?

JS concurrency model

Browser는 JS Engine이 있고, JS Engine은 Single Thread로 운영되는것이 맞다. (JS가 Single Thread 언어이니깐.)

하지만 Browser에는 JS Engine에 제공하지 않는 기능 (DOM 조작, AJAX) web API가 존재한다.

이를 제어하기 위해서는 Event Loop와 Callback Queue가 존재한다.

 

1. 브라우저가 각종 작업을 Multi thread로 실행한다. (rendering, 통신...)

2-1. JS를 해석하면서 함수를 call stack에 순서대로 push 한다.

2-2. web API에게 task를 주고 web API는 일이 끝나면 callback Queue에 함수를 적제한다.

3. 쌓인 순서 반대로 함수가 실행된다. (LIFO)

4-1. 실행된 함수는 pop 된다.

4-2. call stack이 모두 비었으면 callback Queue에서 call stack으 함수를 적제시킨다.

5. call stack이 모두 빌 때까지 2 ~ 4를 수행한다.

 

Browser에서 Single Thread로 실행되는 부분은 JS 코드를 실행하거나 memory에 접근하여 읽고 쓰는 경우이다.

또한 web API도 multi thread로 실행되어 동시성을 보인다.

 

결론적으로 Concurrency가 보이는 이유는 Browser는 JS Engine 외에도 수 많은 컴포넌트가 있고 이런 요소들은 multi thread로 동작하기 때문이다.

 

 

 

참고 문헌

https://www.youtube.com/watch?v=-G9c4CMMUKc 

http://latentflip.com/loupe/?code=!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D