Part 01 웹 프로그램 언어의 기초_05

Naver BoostCourse Full-Stack Developer Course

Part 01 웹 프로그래밍 기초

04. browser의 동작

※ Intro

- 웹을 통해서 전달되는 데이터는 어딘가에서 해석되어야함.

- 서버에서 전송한 데이터(ex: HTML 등)가 클라이언트에 도착해야할 곳은 'Browser'임.

- Browser : 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있음.

- 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있음.

※ 학습 목표

- HTML 파일이 올 때 브라우저가 어떻게 렌더링 과정을 거쳐서 화면에 보이게 되는지 간단히 이해하기

※ 핵심 개념

- Web Browser Rendering

※ 브라우저 컴포넌트 (Browser components)

※ 브라우저의 동작

- 크로미움은 V8 + Blink을 포함한 구글 브라우저 오픈소스 애플리케이션

- 크롬은 크로미움을 기반으로 만들어짐

- 크로미움은 렌더링 엔진으로 Blink를(webkit에서 fork된) 사용. 그러나 Blink가 크로미움으로 바뀐 것은 아님

※ 브라우저

- 브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어

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

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

-브라우저마다 서로 다른 엔진을 포함하고 있음

※ 사파리 브라우저에서 처리되는 webkit 렌더링 엔진 처리과정

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

- HTML을 해석해서 DOM Tree를 만듬

- CSS를 해석해서 CSS Tree(CSS Object Model)을 만듬

- 이 과정에서 Parsing 과정이 필요함. 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정

- DOM Tree와 CSS Tree 이 두 개는 연관되어 있어 Render Tree로 다시 조합됨

- 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있음

- Render Tree 정보를 통해서 화면에 어떤 부분에 어떻게 색칠할지 Painting 과정을 거치게 됨

※ HTML Parser

※ CSS Parsing

※ CSS Box model