4. 주 요 내 용
• 웹 브 라 우 저 역 할 과 구 조
• 웹 엔 진 의 역 할 과 구 조
• 주 요 실 행 흐 름
• 로 딩 & 파 싱
• DOM 트 리 & CSS 규 칙 트 리 생 성
• 스 크 립 트 와 CSS 처 리 순 서
• 렌 더 트 리 생 성
• 레 이 아 웃
• 그 리 기
5. 웹 브 라 우 저 가 주 로 하 는 일
• URL 입 력 을 받 는 다
• 서 버 에 요 청 을 보 낸 다 .
• 웹 페 이 지 를 불 러 온 다
• 웹 페 이 지 에 속 한 이 미 지 , JS 파 일 , CSS 파 일 등 을 불 러 온 다
• 자 바 스 크 립 트 를 실 행 한 다
• 화 면 에 컨 텐 트 를 표 시 한 다
17. 스 크 립 트 와 CSS 처 리 순 서
• HTML 은 기 본 적 으 로 동 기 적 처 리
• 스 크 립 트 가 샐 행 될 때 , 보 통 파 싱 은 중 지
o defer, async 속 성 지 원 으 로 동 시 처 리 가 능
• 파 싱 중 스 크 립 트 가 CSS 정 보 요 청 가 능
o CSS 처 리 중 일 때 , 관 련 스 크 립 트 실 행 중 지
참 고 : http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-
explained/
19. 렌 더 트 리 생 성
• No render object for non visual DOM elements
• Some elements has several render objects
o <select>, text
• CSS Position => float, fixed
20. 렌 더 트 리 생 성
RenderView
RenderObject(p) RenderObject(div)
RenderObject("Hello World") RenderObject(img)
21. 레 이 아 웃
• 렌 더 객 체 가 위 치 와 크 기 가 갖 게 되 는 과 정
• 트 리 탐 색 Left-to-right, top-to-bottom
22. 비 동 기 및 동 기 식 레 이 아 웃
• Dirty bit system
• 비 동 기 및 동 기 식 레 이 아 웃
o 비 동 기 : Incremental layout
o 동 기 식 : Global layout, 스 크 립 트 에 서 layout 변 경 시
24. 그 리 기 (Painting)
• 2D 벡 터 드 로 잉 필 요
o Cairo, Direct2D, Skia
• 일 반 적 인 데 스 크 탑 브 라 우 저
o expose 발 생 시 바 로 바 로 전 체 / 일 부 영 역 그 림
• 모 바 일 / 크 롬 브 라 우 저
o 비 트 맵 형 태 로 그 린 결 과 를 따 로 저 장
25. 그 리 기 순 서
• 렌 더 트 리 를 탐 색 하 면 서 paint() 실 행
• Global and Incremental Painting
• 그 리 기 순 서 (CSS2.1)
o background color
o background image
o border
o children
o outline
26. 참 고
• 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/
