Airbnb tech talk: Levi Weintraub on webkit

84,507 views

Published on

These are the accompanying slides to a tech talk given at airbnb.
Video here: http://www.youtube.com/watch?v=GGzmST5nNSM
Other tech talks here: https://www.airbnb.com/tech_talks

Published in: Technology
  • Be the first to comment

Airbnb tech talk: Levi Weintraub on webkit

  1. 1. WebKit! how the web is renderedLevi Weintraub
  2. 2. meIntel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  3. 3. meIntel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  4. 4. adventure motorcyclist
  5. 5. Hi Dad! adventure motorcyclist
  6. 6. rendering engine
  7. 7. browserrendering engine
  8. 8. 3 primary rendering engines
  9. 9. primary rendering enginesTrident
  10. 10. primary rendering enginesTridentInternet Explorer
  11. 11. primary rendering enginesTrident GeckoInternet Explorer
  12. 12. primary rendering enginesTrident GeckoInternet Explorer Firefox
  13. 13. primary rendering enginesTrident Gecko WebKitInternet Explorer Firefox
  14. 14. primary rendering enginesTrident Gecko WebKitInternet Explorer Firefox Chrome, Safari, iOS, Android, Qt, Blackberry, webOS, Kindle, etc.
  15. 15. Gecko WebKit FREE!
  16. 16. Gecko WebKit FREE! Firefox Chromium
  17. 17. over 38%1 1: StatCounters Global March 2012 http://gs.statcounter.com
  18. 18. history
  19. 19. KHTML + Konquerer
  20. 20. 19 98 KH TM Lr ele as20 ed 01 W eb Kit20 se 02 c ret Ja ly va for Sc ke20 rip db 03 tC yA W ore pp eb Co rel le ea re se & d Sa20 fa ri r 05 ele W as eb ed Kit op en so20 urc 07 ed Sa far i fo20 rW 08 ind G oo ow gle s20 Ch 09 rom C hro er me ele20 Be as 10 ta ed KD for for E Ma W re- cO ind ow int S s eg rat X e an20 sW dL 12 eb inu W Kit x eb -W?? Kit ? do eb Kit mi na 2aPr nt nn ofi we ou t!! bp nc lat ed f orm
  21. 21. anatomy of a WebKit browser
  22. 22. Embedding Application pushes WebKit to do work handles user input WebKit (component) WebCoreJavaScript Platform Engine
  23. 23. WebKit-based browser WebKit (component) interface between rendering engine and embedding application WebCoreJavaScript Platform Engine
  24. 24. WebKit-based browser WebKit (component) WebCore application logic loading painting parsing event handlingJavaScript layout editing Platform Engine style resolution javascript bindings
  25. 25. WebKit-based browser WebKit (component) WebCoreJavaScript Platform network stack Engine graphics library font engine native widgets abstraction of native components
  26. 26. WebKit-based browser WebKit (component) WebCore JavaScript Platform EngineV8 or JavaScriptCoreparses and executes page logicallows DOM manipulation
  27. 27. WebCore
  28. 28. primary data structuresparsing & interface: DOM treelayout and rendering: render object tree style tree layer tree line box tree
  29. 29. main flow
  30. 30. network engineloading parser
  31. 31. loader parsing DOM tree
  32. 32. parsing JavaScript I AP M DO DOM tree att ac h render tree
  33. 33. DOM treerepresentation of documentdocument APIshadow DOM
  34. 34. DOM treemarkup DOM representation<html> HTMLDocument <body> HTMLHTMLElement <div> HTMLBodyElement foo HTMLDivElement <span> Text("foo") bar HTMLSpanElement </span> Text("bar") </div> </body></html>
  35. 35. DOM tree style att ac h render tree
  36. 36. OK!
  37. 37. render forestrender object treelayer treeinline box treestyle tree
  38. 38. render object treeowned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests
  39. 39. 12 paint phases!block background child outlineschild block background self outlinechild block backgrounds selectionfloat collapsed table bordersforeground text clipoutline mask
  40. 40. render object treeowned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests
  41. 41. render object treeDOM representation render objectsHTMLBodyElement RenderBlock HTMLDivElement RenderBlock Text("foo") RenderText("foo") HTMLSpanElement RenderInline Text("bar") RenderText("bar")
  42. 42. anonymous blocksDOM representation render objectsHTMLBodyElement RenderBlock HTMLDivElement RenderBlock Text("foo") RenderBlock(anonymous) HTMLSpanElement RenderText("foo") Text("bar") RenderInline HTMLDivElement RenderText("bar") Text("baz") RenderBlock RenderText("baz")
  43. 43. style treecontains all computed style values for renderersowned by render object treeRenderObjects share RenderStylesRenderStyles share data members
  44. 44. render layer treelike helper class for renderingused for <video>, <canvas> with WebGL,positioned, transformed, transparent, masked,clipped, scrollable, or reflected elementsestablishes coordinate space and z-orderingat least one per document, sparsely maps torenderers
  45. 45. render layer structure negative z-index list RenderLaye RenderLaye r Render r Layers RenderLayer positive z-index list RenderLaye RenderLaye r Render r Layers RenderObjectRenderObject RenderObject
  46. 46. render layer painting negative z-index list RenderLaye RenderLaye r Render r Layers 1 RenderLayer positive z-index list RenderLaye RenderLaye r Render r Layers RenderObjectRenderObject RenderObject
  47. 47. render layer painting negative z-index list RenderLaye RenderLaye r Render r Layers 2 RenderLayer positive z-index list RenderLaye RenderLaye r Render r Layers RenderObjectRenderObject RenderObject
  48. 48. render layer painting negative z-index list RenderLaye RenderLaye r Render r Layers RenderLayer 3 positive z-index list RenderLaye RenderLaye r Render r Layers RenderObjectRenderObject RenderObject
  49. 49. render layer painting, softwarepaint the intersection of the paint dirty rect withall intersecting layers in orderall layers render into the same output buffer
  50. 50. render layer painting, hw acceleratedsome RenderLayers have backing store GPUtextureused for 3D transforms, <video>, <canvas>/plugins with 3D, stacking contexts, or sub-framesdirtied RenderLayers paint to GPU textureGPU composites textures onto final outputbuffer
  51. 51. line box treeowned by RenderBlockone RootInlineBox per lineRootInlineBox has list of InlineBoxes in that lineeach InlineBox has a RenderObjecta renderer may have many InlineBoxesrelies on RenderBlock for layout
  52. 52. line box tree Markup: <div>foo<b>bar</b><br>baz</div>render tree line box treeRenderBlock(div) RenderBlock(div) RenderText("foo") RootInlineBox RenderInline(b) InlineTextBox("foo") RenderText("bar") InlineFlowBox(b) RenderBR InlineTextBox(b) RenderText("baz") InlineBox(br) RootInlineBox InlineTextBox("baz")
  53. 53. layoutchanges to DOM marks renderers as dirtylayout before paint or measurement from JS● save old repaint rect● bring in updates from DOM● determine our preferred width● layout children to determine height● repaint difference between old and new rect
  54. 54. layoutchanges to DOM marks renderers as dirtylayout before paint or measurement from JS● save old repaint rect● bring in updates from DOM● determine our preferred width● layout children to determine height● repaint difference between old and new rect
  55. 55. review of main flowloader->parser->DOM tree->render treerender tree:● RenderObject tree● RenderLayer tree● RenderStyle tree● InlineBoxTree
  56. 56. paintanimations, blinking carets, layout, etc. triggerinvalidations to embedder appapp collects rects, triggers painttree walk from root RenderLayerRenderObjects and InlineBoxes paintGraphicsContext abstraction
  57. 57. hit testingconstant during mouse movemultiple phasestree walk from root RenderLayerRenderLayer transforms into local coordinates
  58. 58. upcoming featurescomponent modelsub-pixel layoutlots lots more
  59. 59. component modelbased on shadow DOMhides implementation● events re-targeted● shadow children inaccessible by regular DOMdefined interface
  60. 60. shadow DOM tree shadow boundary Do cu m en tt re e shadow host shadow rootDOM child DOM child shadow child shadow child
  61. 61. shadow render tree re nde rt re e shadow host shadow child shadow child
  62. 62. integer layoutlayout currently uses integersfractional pixel values truncatedbreaks at non-1:1 zoomerror accumulates
  63. 63. 1.5x zoom is bad150px * 1.5x = 225px(15px * 1.5x) * 10 = 220px
  64. 64. sub-pixel layoutintegers replaced by fixed-point unitboxes snapped to pixel valuessupports sub-pixel CSS valueserror doesnt accumulate
  65. 65. multi-process browserscentralized resources● networking● cache● compositor● pluginssafety through sandboxingmultiple main loops ≈ multi-core
  66. 66. chrome architecture network stack browser process file io GPU process plugin process plugin processes shared memorygles2.0 instructions render textures processes
  67. 67. thanks! questions? http://webkit.org http://chromium.org leviw@chromium.orgLevi Weintraub

×