How to Browsers Work..!!!

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

[허 준 회   http://opensoftware.kr] 의 PPT 참고하여 정리하였습니다.

-웹 브라우저가 하는 일

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

-웹 엔진이 하는 일

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

-웹엔진 아키텍처
(그림)/8

-주요 실행 흐름

-웹킷 예

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

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

-HTML 파싱 특징 
 오류를 허용
 파싱 도중에 문서 수정 가능( 그래서  동적으로 DOM구조를 생성하며 바꿀수 있는 것인가? )

-스크립트와 CSS 처리 순서

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

-렌더 트리 생성
( <p> <div> <"Hello World"> <img> 등등 모든  html의 속성들이 RenderObject 로 처리 되는가??? )

• 스타일 정보, 크기와 위치 정보 갖고 있음
  
• Plug-in, 폰트, 이미지, Shadow DOM 트리와 연결
•  역할
  -Layout
  -Painting
  -Hit Testing 

-레이아웃 단계

• 렌더 객체(Render Object)가 위치와 크기를 갖게 되는 과정
  
• 트리 탐색Left-to-right, top-to-bottom 

      비동기 및 동기식 레이아웃

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

-그리기(Painting)

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

-그리기 순서

• 렌더 트리를 탐색하면서 paint() 실행
  
• Grobal and Incremental Painting
•  그리기 순서 (CSS 2.1)
  -background color
  -background image
  -border
  -children
  -outline 

-다양한 트리 구조 관리

• 문서 구조
  -DOM 트리, Shadow DOM 트리 (???)
  
• 레이아웃
  -RenderObject 트리
  -RenderStyle
  -RenderLayer 트리
  -GraphicsLayer 트리
•  문자열 레이아웃 
  -LineBox 

-Reflow(Layout) & Repaint

• Reflow
  -각 엘리먼트를 화면에 배치하기 위해 위치와 크기를 갖도록 하는 과정
  (Reflow 발생하는 경우
   -DOM 트리 수정시,
   -Stylesheet 추가시,
   -Style Property 수정시,
   -브라우저 창 크기 조정시,
   -편집 ( 입력, ContentEditable)
   
• Repaint
  -Reflow에 의해 웹페이지 전체 또는 일부 영역을 새로 또는 다시 그리는 과정
  
  
  ※Reflow 발생 최소화
  - DOM, CSS 여러번 나누어 변경하지 말고 한꺼번에 변경
  - InnerHTML vs DOM API  성능과 비교와 유사
  -------------------------------------------------------
  Batch DOM changes and perform them "offline"
  -임시 변경을 저장하기 위해 documentFragment 사용
  -element.cloneNode 이용
  -display: none( 1 reflow, repaint) 속성으로 element 갖추기 

-Webkit 내부에서의 변화

Element::clientHeight()

Document::updateLayoutignorePendingStylesheets()

DocumentL::updateLayout()

Document::updateStyleifNeeded()

Document::recalcStyle(NoChange);

FrameView::layout(bool allowSubtree = true);

-Reflow가 발생하는 DOM API

ElementclientHeight, clientLeft, clientTop, clientWidth, focus(),
getBoundingClientRect(), getClientRects(), innerText,
offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth,
outerText, scrollByLines(), scrollByPages(), scrollHeight,
scrollIntoView(), scrollIntoViewifNeeded(), scrollLeft, scrollTop,
scrollWidth
Frame, Imageheight, width,
RangegetBoundingClientRect(), getClientRects()
------------------------------------------------------------

SVGLocatablecomputeCTM(), getBBox()

SVGTextContentgetCharNumAtPosition(), 

getComputedTextLength(), getEndPositionOfChar(), 

getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), 

getStartPositionOfChar(), getSubStringLength(),

selectSubString()

SVGUseinstanceRoot

windowgetComputedStyle(), scrollBy(), scrollTo(), scrollX,

scrollY, webkitConvertPointFromNodeToPage(), 

webkitConvertPointFromPageToNode()


http://www.slideshare.net/joone/ss-9766705