Language/javascript

Javascript 기본적인 동작 원리 정리(1)

조기축구아저시 2022. 12. 29. 20:07

참고자료

https://www.youtube.com/watch?v=8aGhZQkoFbQ

https://it-ist.tistory.com/290

https://coding-lks.tistory.com/174

https://velog.io/@2weeks0/JavaScript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%A8%EC%88%98-%EB%B3%91%EB%A0%AC-%EC%B2%98%EB%A6%AC

https://it-ist.tistory.com/290
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth

https://darrengwon.tistory.com/953

https://d2.naver.com/helloworld/59361
https://d2.naver.com/helloworld/2922312

What is Javascript?

 

 - non-block UI를 위해 오래 걸리는 작업은 Async Fun을 사용한다. (+ Server Rest API Call)

 - Thread에 대해 알고 있다면 가져야 하는 의문

  > single-threaded와 non-blocking, asynchronous 개념이 어떻게 양립되어 사용할 수 있을까?

  > single-thread에서 Async Function이 어떻게 동작이 가능한가?

- Javascript engine은 Single Thread. BUT, JS Runtime(브라우저나 nodejs)는 멀티 쓰레드이다.

- Web API 함수가 JS Callstack에 적재되면 JS runtime에서는 Thread pool에 위임한다. 

(이어지는 내용 : 어떤 Thread pool? 그림에서 생략된 요소는? Web APIs가 아닌 Async 함수의 경우는?)

일반적인 블로그 글에서는 Web API는 Thread pool 아래에서 동작한다고 적혀있고 해당 개념을 마무리 하고 있다. 그러나 Task Queue도 하나가 아니며 이와 같이 개념이 축약된 부분이 존재한다.


 


 
 
 

관련글

Javascript 기본적인 동작 원리 정리(2)

 

Javascript 기본적인 동작 원리 정리(2)

- setTimeout은 WebAPI로 JS Runtime Thread에서 처리가 완료되면 Task Queue에 적재된다. - Promise의 경우 Microtask Queue에 적재되며 Task Queue와 Microtask Queue의 우선순위는 Microtask queue가 높다. - Promise의 경우 WebAPI

early-football.tistory.com

Javascript 기본적인 동작 원리 정리(3)

 

Javascript 기본적인 동작 원리 정리(3)

- Promise의 경우 Thread pool을 거치지 않고 Stack에서 Queue로 바로 적재가 되었는데 어떻게 Async 동작이 되는가? - Node.js 는 Async 동작을 위해 libuv를 사용하며 Eventloop을 제공하고 JS Engine이 Node.js의 api를

early-football.tistory.com

Javascript 기본적인 동작 원리 정리(4)

 

Javascript 기본적인 동작 원리 정리(4)

아래 그림에서 아직 설명되지 않은 화살표 2개중 하나인 Mouse Click Event(In) Mouse Click Event(In) - 브라우저(크롬)은 Multi Process Program, 탭 내부 모든 작업 Renderer Process에서 담당. - Html 파싱, Dom 제작, css S

early-football.tistory.com

Javascript 기본적인 동작 원리 정리(5)

 

Javascript 기본적인 동작 원리 정리(3)

- Promise의 경우 Thread pool을 거치지 않고 Stack에서 Queue로 바로 적재가 되었는데 어떻게 Async 동작이 되는가? - Node.js 는 Async 동작을 위해 libuv를 사용하며 Eventloop을 제공하고 JS Engine이 Node.js의 api를

early-football.tistory.com

 

Javascript 기본적인 동작 원리 정리(1)

 

Javascript 기본적인 동작 원리 정리(1)

What is Javascript? - non-block UI를 위해 오래 걸리는 작업은 Async Fun을 사용한다. (+ Server Rest API Call) - Thread에 대해 알고 있다면 가져야 하는 의문 > single-threaded와 non-blocking, asynchronous 개념이 어떻게 양

early-football.tistory.com