브라우저

브라우저란 사용자가 서버에 요청한 자원에 해당하는 서버의 응답을 웹문서로 가져와 표현하는 소프트웨어 이다.
여기에서 자원은 html/css/javascript, 이미지 등이 포함된다.

대부분의 프로그래밍 언어는 운영체제 위에서 실행되지만 자바스크립트는 웹 애플리케이션으로 브라우저에서 html/css와 함께 실행된다.

브라우저의 동작 원리

html과 css 파일은 렌더링 엔진의 html파서, css파서에 의해 파싱되어 dom, cssom 트리로 변환 -> 렌더 트리로 결합
브라우저는 렌더 트리를 기반으로 웹페이지를 표시한다.

자바스크립트는 자바스크립트 엔진이 처리한다.
html 파서는 script 태그를 만나면 dom 생성 프로세스를 잠시 중단하고 자바스크립트 엔진으로 제어 권한을 넘겨 자바스크립트 코드를 실행한다.
자바스크립트 실행이 완료되면 dom 생성을 제개한다.

브라우저는 동기적으로 html/css/js 파일을 처리한다.
때문에 자바스크립트를 body 최 하단부에 위치 시키는 것은 효율적이다.
-> html 요소 들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일을 방지, 완성되지 않은 dom 조작으로 인해 생기는 에러 방지 가능

자바스크립트 이벤트 루프

자바스크립트는 단일 스레드 기반의 언어이기 때문에 한 번에 하나씩의 작업을 수행 한다.
하지만 웹이나 node.js 기반의 언어는 비동기적인 작업을 처리할 수 있다.

자바스크립트는 싱글 스레드를 멀티 스레드 처럼 사용할 수 있도록 이벤트 루프 라는 것을 이용하여 비동기 방식으로 동시성을 지원한다. (브라우저나 node.js 환경에서)

이벤트 루프의 동작

이벤트 루프는 순차적으로 실행되는 자바스크립트의 작업 중 콜백 함수들을 태스크 큐에 전달하고, 콜백 함수는 태스크 큐에서 대기하다가 콜 스택이 비어있다면 이벤트 루프를 통해 콜 스택으로 넘어간다.
태스크 큐는 여러개의 큐가 모여 하나의 큐를 이루고 있다.
콜 스택에 쌓인 콜백함수는 실행 후 콜 스택에서 제거된다.

위와 같은 과정들로 모든 코드가 순차적으로 처리되는 싱글 스레드를 멀티 스레드 처럼 비동기적으로 사용 가능하다..!