Download - 웹 브라우저는 어떻게 동작하나? (2)
웹 브 라 우 저 는 어 떻 게 동 작 하 나 ?(2)
허 준 회 http://opensoftware.kr
2011. 10/19
소 개
• 허 준 회 ([email protected], @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 RenderStyleo 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 Layouto Paintingo 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 을 공 유 함
RenderLayer
HW 가 속
Reflow 와 Repaint
http://www.flickr.com/photos/robtrent/2243025112/in/photostream/
Main Thread 의 역 할
Reflow(Layout) & Repaint
• Reflowo 각 엘 리 먼 트 를 화 면 에 배 치 하 기 위 해 위 치 와 크 기
를 갖 도 록 하 과 정• 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
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
Batch DOM changes and perform them "offline".
• 임 시 변 경 을 저 장 하 기 위 해 documentFragment 사 용• element.cloneNode 이 용• display: none (1 reflow, repaint) 속 성 으 로 element 갖
추 기
Don't ask for computed styles excessively.
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
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, scrollWidthFrame, Imageheight, widthRangegetBoundingClientRect(), getClientRects()
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
Reflow 가 발 생 하 는 DOM API (1)
SVGLocatablecomputeCTM(), getBBox()SVGTextContentgetCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()SVGUseinstanceRootwindowgetComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
Layout 요 청 처 리
참 고
• How Browsers Worko 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, restyleo http://www.phpied.com/rendering-repaint-reflowrelayout-
restyle/