웹 브라우저는 어떻게 동작하나? (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


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, 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/

Technology

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