브라우저와 Node.js 차이

[coddingyun]

둘 다 자바스크립트 엔진을 내장하고 있기 때문에, 자바스크립트를 기반으로 실행된다.

차이점

각 환경에서 제공하는 API

브라우저

사용자에게 웹 페이지를 보여주는 것이 목적이기 때문에 HTML 요소를 선택하고 조작하는 DOM API를 제공한다. 그리고 이런 작업을 수행하기 위해서 window/document 객체에 접근할 수 있다.

Node.js

서버에서 데이터를 다루는 목적으로 사용하기 때문에 로컬 스토리지에 파일을 생성하고 수정하는 File 시스템 관련 API를 제공한다. 이런 작업을 수행하기 위해서 Node.js는 브라우저보다 컴퓨터의 깊숙한 곳까지 제어할 수 있다.

Web API 차이

웹브라우저의 Web APIs 와 Node.js 의 Node.js APIs 들은 구성은 비슷하지만 동작 측면에서 약간 차이가 있다.

예를들어 Timer Web API에서 타이머가 모두 지나가면, 자바스크립트 환경이 브라우저냐 Node.js 냐에 따라 차이가 갈린다.

브라우저

Web APIs는 비동기 작업이 끝나면 스스로 callback queue에 적재한다.

Timer API가 스스로 Task Queue에 콜백 함수를 추가한다.

Node.js

Node.js API들은 이벤트 루프가 직접 옮겨준다.

Timer API가 타이머 완료 이벤트를 발생시키고, 이벤트 루프가 이를 감지하여 Task Queue에 콜백 함수를 추가한다.

이벤트 루프 차이

크롬 브라우저는 libevent를, nodejs는 libuv를 각각 이벤트 루프 구현을 위해 사용한다.
마이크로 태스크와 매크로 태스크의 우선순위를 어떻게 정하냐가 다르다. Nodejs 11 이상에서는 브라우저의 동작과 일치하지만, 이전 버전은 상당히 다르다.

Promise.resolve().then(() => console.log('promise1 resolved'))
Promise.resolve().then(() => console.log('promise2 resolved'))
setTimeout(() => {
  console.log('set timeout3')
  Promise.resolve().then(() => console.log('inner promise3 resolved'))
}, 0)
setTimeout(() => console.log('set timeout1'), 0)
setTimeout(() => console.log('set timeout2'), 0)
Promise.resolve().then(() => console.log('promise4 resolved'))
Promise.resolve().then(() => {
  console.log('promise5 resolved')
  Promise.resolve().then(() => console.log('inner promise6 resolved'))
})
Promise.resolve().then(() => console.log('promise7 resolved'))

브라우저 + Node.js 11 이상

promise1 resolved
promise2 resolved
promise4 resolved
promise5 resolved
promise7 resolved
inner promise6 resolved
set timeout3
inner promise3 resolved
set timeout1
set timeout2

이벤트 루프는 매크로 태스크큐에서 하나의 매크로 태스크를 처리하기전에 마이크로 태스크 큐에 있는 모든 것을 처리해야 된다.

Node.js 11 미만

promise1 resolved
promise2 resolved
promise4 resolved
promise5 resolved
promise7 resolved
inner promise6 resolved
set timeout3
set timeout1
set timeout2
inner promise3 resolved

그러나 11 버전 이전의 node.js에서는, 이벤트 루프의 phase 사이에서만 마이크로 태스크큐를 비우게 된다. 따라서 inner promise3은 모든 setTimeout3이 실행되기 전까지 실행될 수가 없게 된다.

이벤트 루프는 여러 페이즈로 구성되어있고 페이즈마다 관심있어 하는 작업들이 다 다르다. 즉, 비동기 작업의 종류마다 작업이 담기는 페이즈가 달라지며 그에 따라 실행 순서가 달라진다.

참조

https://velog.io/@gwanuuoo/node.js%EC%99%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%B0%A8%EC%9D%B4

https://velog.io/@devjjin/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%9D%98-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC#web-apis%EC%9D%98-%EC%A2%85%EB%A5%98

https://yceffort.kr/2021/08/browser-nodejs-event-loop

https://www.korecmblog.com/blog/node-js-event-loop#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%9D%98-%EC%97%AC%EB%9F%AC-%ED%8E%98%EC%9D%B4%EC%A6%88

https://www.korecmblog.com/blog/node-js-event-loop#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%9D%98-%EC%97%AC%EB%9F%AC-%ED%8E%98%EC%9D%B4%EC%A6%88