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

9,208 views
8,835 views

Published on

WebKit에서 사용하는 트리 구조 소개
Reflow & Repaint 원인과 대처 방안

Published in: Technology

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

  1. 1. 웹 브 라 우 저 는  어 떻 게 동 작 하 나 ?(2) 허 준 회   http://opensoftware.kr 2011. 10/19
  2. 2. 소 개• 허 준 회 (joone@webkit.org, @joone_net)• WebKit Committer• WebKitGtk+, webkit-clutter 개 발 참 여http://collabora.com
  3. 3. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
  4. 4. 주 요 내 용• DOM 트 리 & 렌 더 트 리• Reflow & Repaint
  5. 5. 주 요 실 행 흐 름
  6. 6. 다 양 한 트 리 구 조 관 리• 문 서 구 조 o DOM 트 리 , Shadow DOM 트 리• 레 이 아 웃 o RenderObject 트 리 o RenderStyle o RenderLayer 트 리 o GraphicsLayer 트 리•  문 자 열 레 이 아 웃 o LineBox
  7. 7. DOM 트 리<html> <body> <p> Hello World </p> <div style="position:absolute;left:100px;top:150px"> <img src="example.png"/></div> </body></html>
  8. 8. 렌 더 트 리 (Render Tree) • 스 타 일 정 보 , 크 기 와 위 치 정 보 갖 고 있 음 • Plug-in, 폰 트 , 이 미 지 , Shadow DOM 트 리 와 연 결 • 역 할 o Layout o Painting o Hit Testing
  9. 9. 렌 더 트 리 생 성
  10. 10. RenderLayer 트 리다 음 조 건 에 서 생 성 됨 웹 페 이 지 루 트 (RenderView) CSS position 이 명 확 한 경 우 (relative, absolute, fixed) CSS transform 이 적 용 된 경 우 투 명 도 가 적 용 된 경 우 (CSS opacity) overflow, alpha mask, reflection 이 적 용 된 경 우 3D context 는 가 진 <canvas> 엘 리 먼 트 <video> 엘 리 먼 트
  11. 11. RenderStyle 트 리• 모 든 CSS Style 정 보 갖 고 있 음• 렌 더 트 리 가 소 유 함• RenderObject 는 Style 을 공 유 함
  12. 12. RenderLayer
  13. 13. HW 가 속
  14. 14. Reflow 와 Repaint http://www.flickr.com/photos/robtrent/2243025112/in/photostream/
  15. 15. Main Thread 의 역 할
  16. 16. Reflow(Layout) & Repaint• Reflow o각 엘 리 먼 트 를 화 면 에 배 치 하 기 위 해 위 치 와 크 기 를 갖 도 록 하 과 정• Repaint o Reflow 에 인 해 웹 페 이 지 전 체 또 는 일 부 영 역 을 새 로 또 는 다 시 그 리 는 과 정
  17. 17. Reflow 예 http://www.youtube.com/watch?v=nJtBUHyNBxs
  18. 18. iPhone 예Reflow vs. Repaint
  19. 19. Reflow 발 생• DOM 트 리 수 정• Stylesheet 추 가• Style Property 수 정• 브 라 우 저 창 크 기 조 정• 편 집 ( 입 력 , ContentEditable)
  20. 20. Reflow 발 생 http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  21. 21. 전 략 : DOM Tree, Render Tree 한 꺼 번 에 변 경
  22. 22. Reflow 발 생 최 소 화• DOM, CSS 여 러 번 나 누 어 변 경 하 지 말 고 한 꺼 번 에 변• InnerHTML vs. DOM API 성 능 과 비 교 와 유 사
  23. 23. Dont change individual styles http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  24. 24. Batch DOM changes and perform them"offline". • 임 시 변 경 을 저 장 하 기 위 해 documentFragment 사 용• element.cloneNode 이 용• display: none (1 reflow, repaint) 속 성 으 로 element 갖 추 기
  25. 25. Dont ask for computed styles excessively.  http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  26. 26. WebKit 내 부 에 서 는 ?Element::clientHeight()  Document::updateLayoutIgnorePendingStylesheets() Document::updateLayout(); Document::updateStyleIfNeeded() Document::recalcStyle(NoChange); FrameView::layout(bool allowSubtree = true);
  27. 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,scrollWidthFrame, Imageheight, widthRangegetBoundingClientRect(), getClientRects() http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-
  28. 28. 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
  29. 29. Layout 요 청 처 리
  30. 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/

×