브라우저
브라우저의 핵심 기능은 웹페이지를 서버에 요청하고, 응답을 받아 브라우저에 표시하는 것이다. 서버로 부터 HTML, CSS, Javascript, 이미지등 파일을 응답받아 브라우저에 있는 렌더링 엔진이 페이지를 렌더링한다.
렌더링 엔진 내에 HTML parser와 CSS parser는 각각 html, css파일을 파싱하여 DOM, CSSOM트리로 변환하고, 이후 DOM 트리와 CSSOM 트리는 Render 트리로 결합된다. 이렇게 생성된 Render트리를 이용해 페이지가 렌더링 된다.
Render 트리를 구성할 때, head나 meta tag, script tag 같은 부분들은 생성되지 않고 실제로 렌더링 되는 부분만 Render트리로 이동하게된다.
HTML parser는 파싱 도중 script 태그를 만나면, 자바스크립트 코드를 실행하기 위해 parser는 자바스크립트 엔진에게 제어권을 넘기며 blocking 된다. 이 후, 실행이 완료되면 동기적으로 parser가 다시 DOM생성을 진행한다.
따라서 script태그는 html파일에 최하단에 위치하는 것이 좋다. 중간에 script태그들이 많이 있을 경우, 자바스크립트 엔진과 렌더링 엔진으로 왔다갔다 하게되기 때문에 지연되고, 아직 DOM트리에 생성되지 않은 부분을 script태그내에서 조작할 수도 있기 때문이다.
또한 defer, async 속성을 통해 실행시기를 제어할 수 있다.
<!-- html 파싱과 함께 로딩되고 로딩이 완료된 이 후 실행되는 동안 parsing이 중단됩니다. -->
<script async src="1.js">
<!-- html 파싱과 함께 로딩되고, 실제 실행은 파싱이 끝난 뒤 실행됩니다. -->
<script defer src="1.js">NodeJS
NodeJS는 크롬에서 사용되는 v8 javascript엔진을 브라우저가 아닌 환경에서 사용할 수 있도록 하는 자바스크림 런타임이다.
브라우저에서는 DOM API와 같은 Web API를 지원하지만 NodeJS는 브라우저가 아닌 환경에서 사용이 주 목적이다 보니 Web API들을 지원하지 않는다. 대신 브라우저에서 지원하지 않는 파일 생성 및 수정을 위한 File 시스템을 지원한다. 브라우저는 사용자 컴퓨터에서 동작하기 때문에, 파일을 생성하거나 로컬 파일을 수정하는 등이 가능하다면 보안에 취약할 수 있어 이를 금지하고 있다.
ref
