블록체인 sw개발자

JS Runtime

sang969 2023. 6. 26. 15:11

 

JS Runtime

자바스크립트 런타임(Javascript Runtime)

 런타임은 코드를 실행해주는 아이이다.

 

자바스크립트는 하나의 콜 스택을 가지는 싱글 스레드 프로그래밍 언어이다. 싱글 스레드라는 것은 한 번에 하나의 명령 집합만이 실행된다는 것을 의미한다. 그렇기 때문에 자바스크립트는 동기식(Synchronous)으로 작업을 처리할 수 밖에 없는데 , 이로 인해서 많은 문제가 발생한다.

만약 처리하는데 많은 시간이 걸리는 작업이 있다고 생각해보자. 그 작업이 실행되는 동안 사용자는 아무것도 할 수 없을 것이다.

자바스크립트 엔진에는 하나의 메모리 힙과 콜 스택이 존재하므로 다른 프로그램이 무언가를 실행하려면 현재 작업이 끝날때 까지 기다려야하는 문제점이 있었다. 그리고 만약 많은 시가닝 걸리는 작업을 수행한다면 프로그램이 엄청나게 느려질 것이다.

그렇다면 어떤 방식이 이를 해결할 수 있을까?

오래 걸리는 일은 백그라운드에서 처리하고 간단하게 처리할 수 있는 작업들만 콜 스택에서 수행한다면 효율적으로 처리할 수 있을것이다. 그리고 이런 일이 가능하게 해주는 것이 바로 자바스크립트 런타임이다.

 

Call Stack 와 Memory heap을 -javascript Engine이라고 부른다.

 

lefr동기식, right 비동기식

 

동기와 비동기

  • 동기식 (Synchronous)
    먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식. 즉, 한 번에 여러 작업을 처리하지 않고 하나만 처리함.
  • 비동기식 (Asynchronous)
    먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. 즉, 한 번에 여러 작업을 처리함.

 

 

익스플로러 나 크롬 을 사용할때 프로그램 1개의 프로세스가 생성됩니다.

 

1개의 프로세스가 열리면 고유한 프로세

function a() {
    a()
}

a()

// stack overflow

 

 

Web API

Web API는 브라우저와 함께 제공된다. 웹 API는 HTTP 전송, setTimeout, DOM Event 등과 같은 다양한 작업을 수행할 수 있다. 또한 브라우저에서 캐싱 또는 데이터베이스 저장소를 사용할 수 있게 해준다.

 

개발자 도구에 들어가서 콘솔창에 window를 입력해 보자.

엄청나게 방대한 양의 객체가 나오는 것을 확인할 수 있는데 이 window객체가 바로 브라우저가 제공하는 Web API 이다. 

 

 

 

이벤트 루프와 콜백 큐 (Event Loop and Callback Queue)

Web API는 브라우저에서 제공되는 함수 및 기타 등등이라고 배웠다. 예를 들어, 코드를 쭉 실행하다가 setInterval 함수가 나온다면 콜 스택은 '이건 내가 모르는건데?' 하고 Web API로 전달한다.
Web API에서는 해당 작업을 자체적으로 처리한 뒤 콜백 큐(Callback Queue) 로 전달한다. 이렇게 콜백 큐로 들어온 작업들은 콜 스택이 비어있을 경우에만 콜 스택으로 이동하게 되는데 이 때 이벤트 루프(Event Loop) 가 콜 스택이 비어있는지 주기적으로 확인하고 콜백 큐에 있는 작업들을 이동시키는 역할을 한다.

 

DOM 이란

 

DOM 은 Document Object Model(문서객체모델)의 약자로  HTML, XML 문서의 객체를 나타내고 상호작용하기 위한 API 이다.

DOM은 문서의 구조화된 표현(structured representation)을 제공한다. DOM은 문서를 논리 트리로 표현하고 각 노드는 객체를 갖는다.

DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

여기서 말하는 문서인 Document는 웹페이지를 말한다. 이 문서는 웹 브라우저를 통해 내용이 해석되고, 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타난다. 문서의 모든 element인 html, body, title, head, button 과 같은 태그들은 문서를 위한 document object model 의 한 부분이라고 할 수 있다.

 

DOM과 HTML의 차이점

  • DOM은 항상 유효한 HTML 형식이다.
  • DOM은 JavaScript에 의해 수정될 수 있는 동적 모델이어야 한다.
  • DOM은 가상 요소를 포함하지 않는다. ( Ex. ::after )
  • DOM은 보이지 않는 요소를 포함한다. ( Ex. display : none )

 

Critical Rendering Path

브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 Critical Rendering Path, CPR이라고 한다.