Successfully reported this slideshow.
Your SlideShare is downloading. ×

Airbnb tech talk: Levi Weintraub on webkit

Airbnb tech talk: Levi Weintraub on webkit

Download to read offline

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

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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Airbnb tech talk: Levi Weintraub on webkit

  1. 1. WebKit! how the web is rendered Levi Weintraub
  2. 2. me Intel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  3. 3. me Intel->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. browser rendering engine
  8. 8. 3 primary rendering engines
  9. 9. primary rendering engines Trident
  10. 10. primary rendering engines Trident Internet Explorer
  11. 11. primary rendering engines Trident Gecko Internet Explorer
  12. 12. primary rendering engines Trident Gecko Internet Explorer Firefox
  13. 13. primary rendering engines Trident Gecko WebKit Internet Explorer Firefox
  14. 14. primary rendering engines Trident Gecko WebKit Internet 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: StatCounter's Global March 2012 http://gs.statcounter.com
  18. 18. history
  19. 19. KHTML + Konquerer
  20. 20. 19 98 KH TM Lr ele as 20 ed 01 W eb Kit 20 se 02 c ret Ja ly va for Sc ke 20 rip db 03 tC yA W ore pp eb Co rel le ea re se & d Sa 20 fa ri r 05 ele W as eb ed Kit op en so 20 urc 07 ed Sa far i fo 20 rW 08 ind G oo ow gle s 20 Ch 09 rom C hro er me ele 20 Be as 10 ta ed KD for for E Ma W re- cO ind ow int S s eg rat X e an 20 sW dL 12 eb inu W Kit x eb -W ?? Kit ? do eb Kit mi na 2a Pr 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) WebCore JavaScript Platform Engine
  23. 23. WebKit-based browser WebKit (component) interface between rendering engine and embedding application WebCore JavaScript Platform Engine
  24. 24. WebKit-based browser WebKit (component) WebCore application logic loading painting parsing event handling JavaScript layout editing Platform Engine style resolution javascript bindings
  25. 25. WebKit-based browser WebKit (component) WebCore JavaScript Platform network stack Engine graphics library font engine native widgets abstraction of native components
  26. 26. WebKit-based browser WebKit (component) WebCore JavaScript Platform Engine V8 or JavaScriptCore parses and executes page logic allows DOM manipulation
  27. 27. WebCore
  28. 28. primary data structures parsing & interface: DOM tree layout and rendering: render object tree style tree layer tree line box tree
  29. 29. main flow
  30. 30. network engine loading 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 tree representation of document document API shadow DOM
  34. 34. DOM tree markup 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 forest render object tree layer tree inline box tree style tree
  38. 38. render object tree owned by DOM tree only exists for rendered content responsible for layout and paint answers DOM API measurement requests
  39. 39. 12 paint phases! block background child outlines child block background self outline child block backgrounds selection float collapsed table borders foreground text clip outline mask
  40. 40. render object tree owned by DOM tree only exists for rendered content responsible for layout and paint answers DOM API measurement requests
  41. 41. render object tree DOM representation render objects HTMLBodyElement RenderBlock HTMLDivElement RenderBlock Text("foo") RenderText("foo") HTMLSpanElement RenderInline Text("bar") RenderText("bar")
  42. 42. anonymous blocks DOM representation render objects HTMLBodyElement RenderBlock HTMLDivElement RenderBlock Text("foo") RenderBlock(anonymous) HTMLSpanElement RenderText("foo") Text("bar") RenderInline HTMLDivElement RenderText("bar") Text("baz") RenderBlock RenderText("baz")
  43. 43. style tree contains all computed style values for renderers owned by render object tree RenderObjects share RenderStyles RenderStyles share data members
  44. 44. render layer tree like helper class for rendering used for <video>, <canvas> with WebGL, positioned, transformed, transparent, masked, clipped, scrollable, or reflected elements establishes coordinate space and z-ordering at least one per document, sparsely maps to renderers
  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 RenderObject RenderObject 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 RenderObject RenderObject 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 RenderObject RenderObject 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 RenderObject RenderObject RenderObject
  49. 49. render layer painting, software paint the intersection of the paint dirty rect with all intersecting layers in order all layers render into the same output buffer
  50. 50. render layer painting, hw accelerated some RenderLayers have backing store GPU texture used for 3D transforms, <video>, <canvas>/ plugins with 3D, stacking contexts, or sub- frames dirtied RenderLayers paint to GPU texture GPU composites textures onto final output buffer
  51. 51. line box tree owned by RenderBlock one RootInlineBox per line RootInlineBox has list of InlineBoxes in that line each InlineBox has a RenderObject a renderer may have many InlineBoxes relies on RenderBlock for layout
  52. 52. line box tree Markup: <div>foo<b>bar</b><br>baz</div> render tree line box tree RenderBlock(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. layout changes to DOM marks renderers as dirty layout 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. layout changes to DOM marks renderers as dirty layout 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 flow loader->parser->DOM tree->render tree render tree: ● RenderObject tree ● RenderLayer tree ● RenderStyle tree ● InlineBoxTree
  56. 56. paint animations, blinking carets, layout, etc. trigger invalidations to embedder app app collects rects, triggers paint tree walk from root RenderLayer RenderObjects and InlineBoxes paint GraphicsContext abstraction
  57. 57. hit testing constant during mouse move multiple phases tree walk from root RenderLayer RenderLayer transforms into local coordinates
  58. 58. upcoming features component model sub-pixel layout lots lots more
  59. 59. component model based on shadow DOM hides implementation ● events re-targeted ● shadow children inaccessible by regular DOM defined interface
  60. 60. shadow DOM tree shadow boundary Do cu m en tt re e shadow host shadow root DOM 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 layout layout currently uses integers fractional pixel values truncated breaks at non-1:1 zoom error accumulates
  63. 63. 1.5x zoom is bad 150px * 1.5x = 225px (15px * 1.5x) * 10 = 220px
  64. 64. sub-pixel layout integers replaced by fixed-point unit boxes snapped to pixel values supports sub-pixel CSS values error doesn't accumulate
  65. 65. multi-process browsers centralized resources ● networking ● cache ● compositor ● plugins safety through sandboxing multiple main loops ≈ multi-core
  66. 66. chrome architecture network stack browser process file io GPU process plugin process plugin processes shared memory gles2.0 instructions render textures processes
  67. 67. thanks! questions? http://webkit.org http://chromium.org leviw@chromium.org Levi Weintraub

×