스페셜스터디

4)브라우져의 동작

WWW를 통해 전달되는 데이터가

어떻게 해석될것인가?

서버에서 온 데이터가 해석되는 곳이 브라우져 입니다.

Ex)구글 크롬, 인터넷 익스플로러 등

브라우져에는 데이터를 해석해주는

'파서'와 데이터를 화면에 뿌려주는 '렌더링엔진'이

있습니다.

이러한 브라우져 내부동작에 대해 반드시 알아야 하는것은

아니지만 내부를 이해하면 웹개발의 난해한 문제와

최적화된 웹 개발을 할 수 있습니다.

학습목표 

1.HTML 파일이 올때 브라우져의 렌더링 과정에 대해 이해한다.

학습내용

웹페이지의 소스가 브라우져가 어떻게 해석할까?

브라우져의 동작을 잘 알고 표현과 최적화를 잘 할 수 있다.

브라우져는 브라우져 컴포넌트로 구성되어 있다.

-유저 인터페이스

-브라우져 엔진

-렌더링 엔진

-네트워킹, 자바스크립트 해석, 유저인터페이스 백엔드 기타 등등...

렌더링 엔진이란?

브라우져의 핵심이 되는 요소로 

소스코드를 해석해서 화면에 뿌려주는

컴파일러 같은 역할을 함.

Ex.)파이어폭스:Geckko 사파리:WebKit 크롬,오페라:Blink

※크롬은 현재 크로니움으로 변경됨

브라우져 엔진의 흐름

HTML 파싱:문자 하나 하나를 DOM(Document Object Model)

의 트리 형태로 구조화 시킨다.

렌더 트리 구조화

렌더 트리 레이아웃화: CSS와 합쳐서 배치를 결정한다.

렌더 트리 출력

화면에 표시

일반적인 파싱 방법

문자와 숫자를 토큰 단위로 자른다.

신택스 트리를 만든다.

HTML 파서

마크업은 DOM구조가 다음과 같다

HtmlElement

bodyelement

ParagraphElement(텍스트), DivElement

CSS 파서

CSS Rule

셀렉터:(클래스나 id 같은)

선언:키-값으로 구성된 선언

정리

1.스크롤을 하거나 클릭하면 브라우져는

어떻게 화면을 그릴까?

=>필요에 따라 다시 렌더링 할 것이다.

2.위에서 표현된 그림처럼 다시 렌더링되지 않을까?

=>중복되는 내용은 쿠키에서 불러와서 리플로우 과정 반복을

줄일 수있을 것이다.