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

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

허 준 회
http://opensoftware.kr

2011. 10/19

소 개

• 허 준 회 (joone@webkit.org, @joone_net)
• WebKit Committer
• WebKitGtk+, webkit-clutter 개 발 참 여

http://collabora.com

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

주 요 내 용

• DOM 트 리 & 렌 더 트 리
• Reflow & Repaint

다 양 한 트 리 구 조 관 리

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

DOM 트 리
<html>
<body>
<p> Hello World </p>
<div style="position:absolute;
left:100px;top:150px">
<img src="example.png"/></div>
</body>
</html>

렌 더 트 리 (Render Tree)

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

RenderLayer 트 리
다 음 조 건 에 서 생 성 됨
 웹 페 이 지 루 트 (RenderView)
 CSS position 이 명 확 한 경 우 (relative, absolute, fixed)
 CSS transform 이 적 용 된 경 우
 투 명 도 가 적 용 된 경 우 (CSS opacity)
 overflow, alpha mask, reflection 이 적 용 된 경 우
 3D context 는 가 진 <canvas> 엘 리 먼 트
 <video> 엘 리 먼 트

RenderStyle 트 리

• 모 든 CSS Style 정 보 갖 고 있 음
• 렌 더 트 리 가 소 유 함
• RenderObject 는 Style 을 공 유 함

Reflow 와 Repaint

http://www.flickr.com/photos/robtrent/2243025112/in/photostream/

Reflow(Layout) & Repaint

• Reflow
o각 엘 리 먼 트 를 화 면 에 배 치 하 기 위 해 위 치 와 크 기
를 갖 도 록 하 과 정
• Repaint
o Reflow 에 인 해 웹 페 이 지 전 체 또 는 일 부 영 역 을
새 로 또 는 다 시 그 리 는 과 정

Reflow 예

http://www.youtube.com/watch?v=nJtBUHyNBxs

iPhone 예

Reflow vs. Repaint

Reflow 발 생

• DOM 트 리 수 정
• Stylesheet 추 가
• Style Property 수 정
• 브 라 우 저 창 크 기 조 정
• 편 집 ( 입 력 , ContentEditable)

Reflow 발 생

http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

전 략 : DOM Tree, Render Tree 한 꺼 번 에 변 경

Reflow 발 생 최 소 화

• DOM, CSS 여 러 번 나 누 어 변 경 하 지 말 고 한 꺼 번 에 변
• InnerHTML vs. DOM API 성 능 과 비 교 와 유 사

Don't change individual styles


Batch DOM changes and perform them
"offline".

• 임 시 변 경 을 저 장 하 기 위 해 documentFragment 사 용
• element.cloneNode 이 용
• display: none (1 reflow, repaint) 속 성 으 로 element 갖
추 기

Don't ask for computed styles excessively.


WebKit 내 부 에 서 는 ?

Element::clientHeight()
Document::updateLayoutIgnorePendingStylesheets()
Document::updateLayout();
Document::updateStyleIfNeeded()
Document::recalcStyle(NoChange);
FrameView::layout(bool allowSubtree = true);

Reflow 가 발 생 하 는 DOM API (1)

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()

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-

Reflow 가 발 생 하 는 DOM API (1)

SVGLocatablecomputeCTM(), getBBox()
SVGTextContentgetCharNumAtPosition(),
getComputedTextLength(), getEndPositionOfChar(),
getExtentOfChar(), getNumberOfChars(), getRotationOfChar(),
getStartPositionOfChar(), getSubStringLength(),
selectSubString()
SVGUseinstanceRoot
windowgetComputedStyle(), scrollBy(), scrollTo(), scrollX,
scrollY, webkitConvertPointFromNodeToPage(),
webkitConvertPointFromPageToNode()

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

참 고
• How Browsers Work
o http://www.html5rocks.com/en/tutorials/interna
ls/howbrowserswork/
• Rendering in WebKit,
o http://www.youtube.com/watch?v=RVnARGhhs9w
• How (not) to trigger a layout in WebKit
o http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-
in-webkit.html
• Rendering: repaint, reflow/relayout, restyle
o http://www.phpied.com/rendering-repaint-reflowrelayout-
restyle/

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

More Related Content

What's hot

Viewers also liked

Similar to 웹 브라우저는 어떻게 동작하나? (2)

More from Joone Hur

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