브라우저란?

웹 브라우저는 동기적으로(synchronous)적으로 HTML, CSS, JS 언어를 해석해서 내용을 화면에 보여주는 응용 소프트웨어입니다.

브라우저 구조

브라우저의 기본적인 구조는 다음과 같습니다.

(출처 = https://d2.naver.com/helloworld/59361)

1. 사용자 인터페이스

사용자가 접근할 수 있는 영역입니다. URL을 입력할 수 있는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로 고침 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다.

2. 브라우저 엔진

사용자의 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 부분입니다. Data Storage를 참조해 로컬 데이터를 이용해 다양한 작업을 하는 곳이라고 생각하시면 됩니다.

3. 렌더링 엔진

브라우저의 동작 원리 이해 중 가장 중요한 부분입니다. 웹 서버로부터 응답받은 리소스를 웹 브라우저 상에 나타내는 기능을 합니다. 예를 들어 HTML 문서를 응답받으면 HTML과 CSS를 파싱해 화면에 표시하는 것이죠.

브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합합니다. 이렇게 생선된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타내는 것입니다.

4. 통신 / UI백엔드 / 자바스크립트 해석기 / 자료저장소

통신 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 플랫폼 독립적인 인터페이스이며 각 플랫폼 하부에서 실행됩니다.
UI벡엔드 : 콤보박스와 창 같은 기본적인 장치를 그립니다.
자바스크립트 해석기 : JS 코드를 해석하고 실행합니다.
자료저장소 : Cookie나 Local Storage 등 브라우저 메모리를 활용해 저장하는 영역입니다.

렌더링 엔진

렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이라고 했죠.
그런데 각 브라우저마다 렌더링 엔진이 달라 같은 페이지라도 다르게 보이는 경우가 있습니다.

렌더링 엔진의 종류

사파리: 웹킷(Webkit) 엔진
파이어폭스 : 게코(Gecko) 엔진
크롬 : 블링크(Blink) 엔진 *블링크는 구글이 웹킷을 대체하기 위해 자체 개발한 엔진입니다.

렌더링 엔진 동작 과정

렌더링 엔진 기본 동작 과정은 다음과 같습니다.

-렌더링 엔진은 HTML 문서를 파싱해 DOM 트리를 구축합니다.
-그 다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 후
-DOM트리와 함께 렌더 트리를 구축합니다.
-렌더 트리 각 노드에 대해 화면 상 어디에 배치할 곳을 결정합니다.
-UI 벡엔드에서 렌더 트리의 각 노드를 그립니다.

이 과정을 자바스크립트는?

Javascript는 렌더링 엔진에서 처리되지 않습니다.
자바스크립트는 자바스크립트 엔진이 처리합니다. HTML 파서는 script태그를 만나면 js코드 실행을 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘깁니다. 그럼 js엔진은 script 태그 내 js코드나 src 속성에 정의된 js 파일을 로드해 파싱후 실행합니다. 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘여 중지했던 시점으로 돌아가 DOM 생성을 재개하는 것이죠.