이 주제를 게시한 이유는 간단하다.

내가 쓸 자바스크립트라는 언어가 웹이란 공간에서 활동하는 과정이 궁금했고,
그 과정 속에서 파생되는 다른 개념까지 공부해보고 싶었기 때문이다.
실제로 브라우저의 동작 원리라는 개념을 공부하며 보게 된 DOM, 렌더링 엔진,
node.js라는 존재 등에 대해 알게 되었고 차후 공부를 하며
벨로그에 업로드하려 한다.

<짤 추가 예정>

Intro

웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능하다.

왜 효율적인 자바스크립트 프로그래밍이 가능한걸까?
이유는 개발자가 HTML,CSS, JS를 사용해 웹을 컨트롤할 수 있기 때문이 아닐까

1. 브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을
서버에 요청하고 표시하는 것이다(HTTP).

브라우저 주소창에 www.gogle.com을 입력했을 때,
브라우저는 서버로부터 HTML, CSS Javascript,
이미지 파일 등을 응답 받는다. HTML, CSS 파일은 렌더링 엔진의
HTML 파서와 CSS 파서에 의해 해석 과정(Parsing)을
거치면서 DOM, CSSOM 트리로 변환되고 렌더 트리에 결합된다.
생성된 렌더 트리를 기반으로 브라우저는 사용자에게 웹 페이지를 출력한다.

자바스크립트는 렌더링 엔진이 아니라 자바스크립트
엔진이 처리하는데, HTML 파서는 script 태그를 만나면
자바스크립트 코드를 실행하기 위해 DOM 생성을 멈추고
script 태그 내부의 자바스크립트 코드 또는 src 속성에
정의되어 있는 자바스크립트 파일을 로드하고 실행한다.

script 태그를 body 맨 아래에 위치시키는 이유를 알았다.
만약 script 태그를 body 최상단에 위치시켰다면
DOM이 생성되지 않은 상태로 자바스크립트가
DOM을 조작하는 것이기 때문에 에러가 발생한다.

2. 브라우저의 기본 구조

2.1 브라우저의 주요 구성 요소

2-1) 사용자 인터페이스

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등
요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

브라우저의 일반적인 인터페이스

• URL를 입력할 수 있는 주소 표시줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

2-2) 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

2-3) 렌더링 엔진

요청한 콘텐츠를 표시.
예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

2-4) 통신

HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

2-5 UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

2-6) 자바스크립트 해석기

자바스크립트 코드를 해석하고 실행.

2-7) 자료 저장소

자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의
자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는
브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

Reference
브라우저 동작 원리
브라우저 동작 원리
Poiemaweb
브라우저 동작 원리