Embed Size (px)
DESCRIPTION
Citation preview
웹 브 라 우 저 는 어 떻 게 동 작 하 나 ?
허 준 회 http://opensoftware.kr
소 개
허 준 회 ([email protected], @joone_net)WebKit CommitterWebKitGtk+, 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 규 칙 트 리 생 성
Firefox Style Context Tree
스 크 립 트 와 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 layouto 동 기 식 : Global layout, 스 크 립 트 에 서 layout 변 경 시
Layout Process
그 리 기 (Painting)
• 2D 벡 터 드 로 잉 필 요o Cairo, Direct2D, Skia
• 일 반 적 인 데 스 크 탑 브 라 우 저o expose 발 생 시 바 로 바 로 전 체 / 일 부 영 역 그 림
• 모 바 일 / 크 롬 브 라 우 저o 비 트 맵 형 태 로 그 린 결 과 를 따 로 저 장
그 리 기 순 서
• 렌 더 트 리 를 탐 색 하 면 서 paint() 실 행• Global and Incremental Painting• 그 리 기 순 서 (CSS2.1)
o background coloro background imageo bordero childreno outline
참 고
• How Browsers Work, http://www.html5rocks.com/en/tutorials/internals/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/
