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

RenderLayer

HW 가 속

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

Main Thread 의 역 할

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 성 능 과 비 교 와 유 사

Dont 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 갖 추 기

Dont 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-

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

http://opensoftware.kr	901
http://opensoftware.tistory.com	226
http://192.168.5.170	119
http://feeds.feedburner.com	26
http://www.hanrss.com	22
http://thirdj.me	8
http://dl.dropbox.com	7
http://www.opensoftware.kr	6
http://search.daum.net	4
http://dntds.dyndns.org:8901	2
http://dntds.dyndns.org	1

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

by Joone Hur on Oct 19, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 1,322

Statistics

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