Your SlideShare is downloading. ×
Airbnb tech talk: Levi Weintraub on webkit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Airbnb tech talk: Levi Weintraub on webkit

34,484
views

Published on

These are the accompanying slides to a tech talk given at airbnb. …

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

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
34,484
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
84
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WebKit! how the web is renderedLevi Weintraub
  • 2. meIntel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  • 3. meIntel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  • 4. adventure motorcyclist
  • 5. Hi Dad! adventure motorcyclist
  • 6. rendering engine
  • 7. browserrendering engine
  • 8. 3 primary rendering engines
  • 9. primary rendering enginesTrident
  • 10. primary rendering enginesTridentInternet Explorer
  • 11. primary rendering enginesTrident GeckoInternet Explorer
  • 12. primary rendering enginesTrident GeckoInternet Explorer Firefox
  • 13. primary rendering enginesTrident Gecko WebKitInternet Explorer Firefox
  • 14. primary rendering enginesTrident Gecko WebKitInternet Explorer Firefox Chrome, Safari, iOS, Android, Qt, Blackberry, webOS, Kindle, etc.
  • 15. Gecko WebKit FREE!
  • 16. Gecko WebKit FREE! Firefox Chromium
  • 17. over 38%1 1: StatCounters Global March 2012 http://gs.statcounter.com
  • 18. history
  • 19. KHTML + Konquerer
  • 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. anatomy of a WebKit browser
  • 22. Embedding Application pushes WebKit to do work handles user input WebKit (component) WebCoreJavaScript Platform Engine
  • 23. WebKit-based browser WebKit (component) interface between rendering engine and embedding application WebCoreJavaScript Platform Engine
  • 24. WebKit-based browser WebKit (component) WebCore application logic loading painting parsing event handlingJavaScript layout editing Platform Engine style resolution javascript bindings
  • 25. WebKit-based browser WebKit (component) WebCoreJavaScript Platform network stack Engine graphics library font engine native widgets abstraction of native components
  • 26. WebKit-based browser WebKit (component) WebCore JavaScript Platform EngineV8 or JavaScriptCoreparses and executes page logicallows DOM manipulation
  • 27. WebCore
  • 28. primary data structuresparsing & interface: DOM treelayout and rendering: render object tree style tree layer tree line box tree
  • 29. main flow
  • 30. network engineloading parser
  • 31. loader parsing DOM tree
  • 32. parsing JavaScript I AP M DO DOM tree att ac h render tree
  • 33. DOM treerepresentation of documentdocument APIshadow DOM
  • 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. DOM tree style att ac h render tree
  • 36. OK!
  • 37. render forestrender object treelayer treeinline box treestyle tree
  • 38. render object treeowned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests
  • 39. 12 paint phases!block background child outlineschild block background self outlinechild block backgrounds selectionfloat collapsed table bordersforeground text clipoutline mask
  • 40. render object treeowned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests
  • 41. render object treeDOM representation render objectsHTMLBodyElement RenderBlock HTMLDivElement RenderBlock Text("foo") RenderText("foo") HTMLSpanElement RenderInline Text("bar") RenderText("bar")
  • 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. style treecontains all computed style values for renderersowned by render object treeRenderObjects share RenderStylesRenderStyles share data members
  • 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. 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. 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. 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. 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. render layer painting, softwarepaint the intersection of the paint dirty rect withall intersecting layers in orderall layers render into the same output buffer
  • 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. 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. 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. 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. 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. review of main flowloader->parser->DOM tree->render treerender tree:● RenderObject tree● RenderLayer tree● RenderStyle tree● InlineBoxTree
  • 56. paintanimations, blinking carets, layout, etc. triggerinvalidations to embedder appapp collects rects, triggers painttree walk from root RenderLayerRenderObjects and InlineBoxes paintGraphicsContext abstraction
  • 57. hit testingconstant during mouse movemultiple phasestree walk from root RenderLayerRenderLayer transforms into local coordinates
  • 58. upcoming featurescomponent modelsub-pixel layoutlots lots more
  • 59. component modelbased on shadow DOMhides implementation● events re-targeted● shadow children inaccessible by regular DOMdefined interface
  • 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. shadow render tree re nde rt re e shadow host shadow child shadow child
  • 62. integer layoutlayout currently uses integersfractional pixel values truncatedbreaks at non-1:1 zoomerror accumulates
  • 63. 1.5x zoom is bad150px * 1.5x = 225px(15px * 1.5x) * 10 = 220px
  • 64. sub-pixel layoutintegers replaced by fixed-point unitboxes snapped to pixel valuessupports sub-pixel CSS valueserror doesnt accumulate
  • 65. multi-process browserscentralized resources● networking● cache● compositor● pluginssafety through sandboxingmultiple main loops ≈ multi-core
  • 66. chrome architecture network stack browser process file io GPU process plugin process plugin processes shared memorygles2.0 instructions render textures processes
  • 67. thanks! questions? http://webkit.org http://chromium.org leviw@chromium.orgLevi Weintraub