Your SlideShare is downloading. ×
웹브라우저는 어떻게 동작하나?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

6,418

Published on

Published in: Technology, Design
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,418
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
131
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 웹 브 라 우 저 는  어 떻 게 동 작 하 나 ? 허 준 회   http://opensoftware.kr
  • 2. 소 개허 준 회 (joone@webkit.org, @joone_net)WebKit CommitterWebKitGtk+, webkit-clutter 개 발http://collabora.com
  • 3. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  • 4. 주 요 내 용• 웹 브 라 우 저 역 할 과 구 조• 웹 엔 진 의 역 할 과 구 조• 주 요 실 행 흐 름• 로 딩 & 파 싱• DOM 트 리 & CSS 규 칙 트 리 생 성• 스 크 립 트 와 CSS 처 리 순 서• 렌 더 트 리 생 성• 레 이 아 웃• 그 리 기
  • 5. 웹 브 라 우 저 가 주 로 하 는 일• URL 입 력 을 받 는 다• 서 버 에 요 청 을 보 낸 다 .• 웹 페 이 지 를 불 러 온 다• 웹 페 이 지 에 속 한 이 미 지 , JS 파 일 , CSS 파 일 등 을 불 러 온 다• 자 바 스 크 립 트 를 실 행 한 다• 화 면 에 컨 텐 트 를 표 시 한 다
  • 6. 브 라 우 저 전 반 적 인 구 조
  • 7. 웹 엔 진 이 하 는 일• 불 러 오 기 (Loading)• 파 싱 (Parsing)• 자 바 스 크 립 트 실 행• CSS 처 리• 레 이 아 웃 (Layout) 작 업• 그 리 기• 이 벤 트 처 리• HTML 편 집
  • 8. 웹 엔 진 아 키 텍 처
  • 9. 주 요 실 행 흐 름
  • 10. 웹 킷 예
  • 11. 불 러 오 기 (Loading) 웹 페 이 지 와 페 이 지 에 속 한 모 든 리 소 스 를 불 러 오 는 과 정
  • 12. 파 싱 (Parsing) HTML 문 서 => DOM 트 리
  • 13. HTML 파 싱 특 징• 오 류 를 허 용• 파 싱 도 중 에 문 서 수 정 가 능
  • 14. DOM 트 리<html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body></html>
  • 15. CSS 규 칙 트 리 생 성
  • 16. Firefox Style Context Tree
  • 17. 스 크 립 트 와 CSS 처 리 순 서• HTML 은 기 본 적 으 로 동 기 적 처 리• 스 크 립 트 가 샐 행 될 때 , 보 통 파 싱 은 중 지 o defer, async 속 성 지 원 으 로 동 시 처 리 가 능• 파 싱 중 스 크 립 트 가 CSS 정 보 요 청 가 능   o CSS 처 리 중 일 때 , 관 련 스 크 립 트 실 행 중 지참 고 : http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
  • 18. 주 요 실 행 흐 름
  • 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 변 경 시
  • 23. Layout Process
  • 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/

×