[부스트코스]1_04_browser의 동작

이전에는 브라우저의 동작에 대해 개발자가 알 필요가 없다고 생각했었다고 합니다.

그런데 간혹 개발자의 의도와는 다르게 브라우저가 작동하는 것,

브라우저의 동작을 어떻게 빠르게 할 수 있을까에 대한 고민에서 브라우저의 동작에 대한 이해가 소개되기 시작했습니다.

브라우저의 구성

- UI : 화면에 보이는 홈버튼, 되돌아가기 버튼등이 이에 해당합니다.

  이는 os수준에서 설정됩니다. 예를들어, Mac은 브라우저 왼쪽에 빨강 초록 노랑 동그라미로, window는 브라우저 오른쪽 -, ㅁ, x로 작은 아이콘이 표시됩니다.

- 브라우저 엔진 : 소스코드를 실행해서 브라우저에 보여주는 역할을 합니다.

  이는 브라우저를 실행하기 위한 핵심 엔진입니다.

- 렌더링 엔진 : 화면에 직접 위치를 잡고 색을 칠해주는 등의 역할을 합니다.

- 네트워킹

- 자바스크립트 인터프리터 : 자바스크립트 코드를 해석하는 역할을 합니다.

 

브라우저 엔진의 메인 플로우

인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있습니다.

그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.

브라우저마다 서로 다른 엔진을 포함하고 있습니다.

아래 그림이 대표적인 내용입니다.

HTML을 해석해 DOM Tree를 만들고, CSS를 해석해 Style Rules를 만듭니다.

 

그런데 DOM이 뭘까요..??

• HTML문서와 문서의 각 요소들의 데이터로 만든 큰 오브젝트
• 그 오브젝트를 조작하기 위한 인터페이스들(DOM API)

HTML문서를 프로그래밍 가능하도록 문서로 만든것! 이라고 정리할 수 있겠습니다.

(API : 쉽게말하자면 함수들의 묶음)

DOM은 xml, html등 마다 다르게 나옵니다.

우리는 스크립트 언어(자바스크립트)를 사용해 DOM에 접근할 수 있습니다.

 

이 과정에서 parsing과정이 필요하고 토큰단위로 해석되는 방식입니다.

CSS가 parsing되는 과정은 다음과 같습니다.

DOM Tree는 화면에 표시되어야 하기 때문에 CSS가 필요합니다.

스타일과 문서를 합하여 Render Tree를 만듭니다. 렌더트리는 화면 어디에 배치될 지, 어떻게 보일지를 결정합니다.

최종적으로 화면에 표시합니다.

 

학습을 마치며..

HTML과 CSS는 다른 언어인데 어떻게 한 화면에 표시될까...?하는 의문이 있었다.

오늘 학습을 통해 그 의문을 해소한 듯 하다.

 

 

사진 출처 https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/