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

7,459 views
7,202 views

Published on

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

No Downloads
Views
Total views
7,459
On SlideShare
0
From Embeds
0
Number of Embeds
2,771
Actions
Shares
0
Downloads
137
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

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

  1. 1. 웹 브 라 우 저 는  어 떻 게 동 작 하 나 ? 허 준 회   http://opensoftware.kr
  2. 2. 소 개허 준 회 (joone@webkit.org, @joone_net)WebKit CommitterWebKitGtk+, webkit-clutter 개 발http://collabora.com
  3. 3. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  4. 4. 주 요 내 용• 웹 브 라 우 저 역 할 과 구 조• 웹 엔 진 의 역 할 과 구 조• 주 요 실 행 흐 름• 로 딩 & 파 싱• DOM 트 리 & CSS 규 칙 트 리 생 성• 스 크 립 트 와 CSS 처 리 순 서• 렌 더 트 리 생 성• 레 이 아 웃• 그 리 기
  5. 5. 웹 브 라 우 저 가 주 로 하 는 일• URL 입 력 을 받 는 다• 서 버 에 요 청 을 보 낸 다 .• 웹 페 이 지 를 불 러 온 다• 웹 페 이 지 에 속 한 이 미 지 , JS 파 일 , CSS 파 일 등 을 불 러 온 다• 자 바 스 크 립 트 를 실 행 한 다• 화 면 에 컨 텐 트 를 표 시 한 다
  6. 6. 브 라 우 저 전 반 적 인 구 조
  7. 7. 웹 엔 진 이 하 는 일• 불 러 오 기 (Loading)• 파 싱 (Parsing)• 자 바 스 크 립 트 실 행• CSS 처 리• 레 이 아 웃 (Layout) 작 업• 그 리 기• 이 벤 트 처 리• HTML 편 집
  8. 8. 웹 엔 진 아 키 텍 처
  9. 9. 주 요 실 행 흐 름
  10. 10. 웹 킷 예
  11. 11. 불 러 오 기 (Loading) 웹 페 이 지 와 페 이 지 에 속 한 모 든 리 소 스 를 불 러 오 는 과 정
  12. 12. 파 싱 (Parsing) HTML 문 서 => DOM 트 리
  13. 13. HTML 파 싱 특 징• 오 류 를 허 용• 파 싱 도 중 에 문 서 수 정 가 능
  14. 14. DOM 트 리<html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body></html>
  15. 15. CSS 규 칙 트 리 생 성
  16. 16. Firefox Style Context Tree
  17. 17. 스 크 립 트 와 CSS 처 리 순 서• HTML 은 기 본 적 으 로 동 기 적 처 리• 스 크 립 트 가 샐 행 될 때 , 보 통 파 싱 은 중 지 o defer, async 속 성 지 원 으 로 동 시 처 리 가 능• 파 싱 중 스 크 립 트 가 CSS 정 보 요 청 가 능   o CSS 처 리 중 일 때 , 관 련 스 크 립 트 실 행 중 지참 고 : http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
  18. 18. 주 요 실 행 흐 름
  19. 19. 렌 더 트 리 생 성 • No render object for non visual DOM elements • Some elements has several render objects o <select>, text • CSS Position => float, fixed
  20. 20. 렌 더 트 리 생 성 RenderView RenderObject(p) RenderObject(div) RenderObject("Hello World") RenderObject(img)
  21. 21. 레 이 아 웃• 렌 더 객 체 가 위 치 와 크 기 가 갖 게 되 는 과 정• 트 리 탐 색 Left-to-right, top-to-bottom
  22. 22. 비 동 기 및 동 기 식 레 이 아 웃• Dirty bit system• 비 동 기 및 동 기 식 레 이 아 웃 o 비 동 기 : Incremental layout o 동 기 식 : Global layout, 스 크 립 트 에 서 layout 변 경 시
  23. 23. Layout Process
  24. 24. 그 리 기 (Painting)• 2D 벡 터 드 로 잉 필 요 o Cairo, Direct2D, Skia• 일 반 적 인 데 스 크 탑 브 라 우 저 o expose 발 생 시 바 로 바 로 전 체 / 일 부 영 역 그 림• 모 바 일 / 크 롬 브 라 우 저 o 비 트 맵 형 태 로 그 린 결 과 를 따 로 저 장
  25. 25. 그 리 기 순 서• 렌 더 트 리 를 탐 색 하 면 서 paint() 실 행• Global and Incremental Painting• 그 리 기 순 서 (CSS2.1) o background color o background image o border o children o outline
  26. 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/

×