웹브라우저는 어떻게 동작하나?

웹 브 라 우 저 는
어 떻 게 동 작 하 나 ?

허 준 회
http://opensoftware.kr

소 개

허 준 회 (joone@webkit.org, @joone_net)
WebKit Committer
WebKitGtk+, webkit-clutter 개 발

http://collabora.com

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

주 요 내 용

• 웹 브 라 우 저 역 할 과 구 조
• 웹 엔 진 의 역 할 과 구 조
• 주 요 실 행 흐 름
• 로 딩 & 파 싱
• DOM 트 리 & CSS 규 칙 트 리 생 성
• 스 크 립 트 와 CSS 처 리 순 서
• 렌 더 트 리 생 성
• 레 이 아 웃
• 그 리 기

웹 브 라 우 저 가 주 로 하 는 일

• URL 입 력 을 받 는 다
• 서 버 에 요 청 을 보 낸 다 .
• 웹 페 이 지 를 불 러 온 다
• 웹 페 이 지 에 속 한 이 미 지 , JS 파 일 , CSS 파 일 등 을 불 러 온 다
• 자 바 스 크 립 트 를 실 행 한 다
• 화 면 에 컨 텐 트 를 표 시 한 다

브 라 우 저 전 반 적 인 구 조

웹 엔 진 이 하 는 일

• 불 러 오 기 (Loading)
• 파 싱 (Parsing)
• 자 바 스 크 립 트 실 행
• CSS 처 리
• 레 이 아 웃 (Layout) 작 업
• 그 리 기
• 이 벤 트 처 리
• HTML 편 집

불 러 오 기 (Loading)

웹 페 이 지 와 페 이 지 에 속 한 모 든 리 소 스 를 불 러 오 는 과 정

파 싱 (Parsing)
HTML 문 서 => DOM 트 리

HTML 파 싱 특 징

• 오 류 를 허 용
• 파 싱 도 중 에 문 서 수 정 가
능

DOM 트 리
<html>
<body>
<p> Hello World </p>
<div> <img src="example.png"/></div>
</body>
</html>

CSS 규 칙 트 리 생 성

스 크 립 트 와 CSS 처 리 순 서

• HTML 은 기 본 적 으 로 동 기 적 처 리
• 스 크 립 트 가 샐 행 될 때 , 보 통 파 싱 은 중 지
o defer, async 속 성 지 원 으 로 동 시 처 리 가 능
• 파 싱 중 스 크 립 트 가 CSS 정 보 요 청 가 능
o CSS 처 리 중 일 때 , 관 련 스 크 립 트 실 행 중 지

참 고 : http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-
explained/

렌 더 트 리 생 성

• No render object for non visual DOM elements
• Some elements has several render objects
o <select>, text
• CSS Position => float, fixed

렌 더 트 리 생 성

RenderView

RenderObject(p) RenderObject(div)
RenderObject("Hello World") RenderObject(img)

레 이 아 웃
• 렌 더 객 체 가 위 치 와 크 기 가 갖 게 되 는 과 정
• 트 리 탐 색 Left-to-right, top-to-bottom

비 동 기 및 동 기 식 레 이 아 웃

• Dirty bit system
• 비 동 기 및 동 기 식 레 이 아 웃
o 비 동 기 : Incremental layout
o 동 기 식 : Global layout, 스 크 립 트 에 서 layout 변 경 시

그 리 기 (Painting)

• 2D 벡 터 드 로 잉 필 요
o Cairo, Direct2D, Skia
• 일 반 적 인 데 스 크 탑 브 라 우 저
o expose 발 생 시 바 로 바 로 전 체 / 일 부 영 역 그 림
• 모 바 일 / 크 롬 브 라 우 저
o 비 트 맵 형 태 로 그 린 결 과 를 따 로 저 장

그 리 기 순 서

• 렌 더 트 리 를 탐 색 하 면 서 paint() 실 행
• Global and Incremental Painting
• 그 리 기 순 서 (CSS2.1)
o background color
o background image
o border
o children
o outline

참 고

• How Browsers
Work, http://www.html5rocks.com/en/tutorials/int
ernals/howbrowserswork/
• Rendering in WebKit, http://www.youtube.com/watch?
v=RVnARGhhs9w
• How WebKit Loads a Web
Page, http://www.webkit.org/blog/1188/how-webkit-loads-a-
web-page/

웹브라우저는 어떻게 동작하나?

More Related Content

What's hot

Viewers also liked

Similar to 웹브라우저는 어떻게 동작하나?

More from Joone Hur

웹브라우저는 어떻게 동작하나?