6. 다 양 한 트 리 구 조 관 리
• 문 서 구 조
o DOM 트 리 , Shadow DOM 트 리
• 레 이 아 웃
o RenderObject 트 리
o RenderStyle
o RenderLayer 트 리
o GraphicsLayer 트 리
• 문 자 열 레 이 아 웃
o LineBox
7. DOM 트 리
<html>
<body>
<p> Hello World </p>
<div style="position:absolute;
left:100px;top:150px">
<img src="example.png"/></div>
</body>
</html>
8. 렌 더 트 리 (Render Tree)
• 스 타 일 정 보 , 크 기 와 위 치 정 보 갖 고 있 음
• Plug-in, 폰 트 , 이 미 지 , Shadow DOM 트 리 와 연
결
• 역 할
o Layout
o Painting
o Hit Testing
10. RenderLayer 트 리
다 음 조 건 에 서 생 성 됨
웹 페 이 지 루 트 (RenderView)
CSS position 이 명 확 한 경 우 (relative, absolute, fixed)
CSS transform 이 적 용 된 경 우
투 명 도 가 적 용 된 경 우 (CSS opacity)
overflow, alpha mask, reflection 이 적 용 된 경 우
3D context 는 가 진 <canvas> 엘 리 먼 트
<video> 엘 리 먼 트
11. RenderStyle 트 리
• 모 든 CSS Style 정 보 갖 고 있 음
• 렌 더 트 리 가 소 유 함
• RenderObject 는 Style 을 공 유 함
16. Reflow(Layout) & Repaint
• Reflow
o각 엘 리 먼 트 를 화 면 에 배 치 하 기 위 해 위 치 와 크 기
를 갖 도 록 하 과 정
• Repaint
o Reflow 에 인 해 웹 페 이 지 전 체 또 는 일 부 영 역 을
새 로 또 는 다 시 그 리 는 과 정
24. Batch DOM changes and perform them
"offline".
• 임 시 변 경 을 저 장 하 기 위 해 documentFragment 사 용
• element.cloneNode 이 용
• display: none (1 reflow, repaint) 속 성 으 로 element 갖
추 기
25. Don't ask for computed styles excessively.
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
26. WebKit 내 부 에 서 는 ?
Element::clientHeight()
Document::updateLayoutIgnorePendingStylesheets()
Document::updateLayout();
Document::updateStyleIfNeeded()
Document::recalcStyle(NoChange);
FrameView::layout(bool allowSubtree = true);
27. 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-
28. 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
30. 참 고
• 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/