Airbnb tech talk: Levi Weintraub on webkit
- 1. WebKit! how the web is rendered Levi Weintraub
- 2. me Intel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
- 3. me Intel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
- 5. Hi Dad! adventure motorcyclist
- 8. 3 primary rendering engines
- 10. primary rendering engines Trident Internet Explorer
- 11. primary rendering engines Trident Gecko Internet Explorer
- 12. primary rendering engines Trident Gecko Internet Explorer Firefox
- 13. primary rendering engines Trident Gecko WebKit Internet Explorer Firefox
- 14. primary rendering engines Trident Gecko WebKit Internet 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: StatCounter's Global March 2012 http://gs.statcounter.com
- 18. history
- 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. anatomy of a WebKit browser
- 22. Embedding Application pushes WebKit to do work handles user input WebKit (component) WebCore JavaScript Platform Engine
- 23. WebKit-based browser WebKit (component) interface between rendering engine and embedding application WebCore JavaScript Platform Engine
- 24. WebKit-based browser WebKit (component) WebCore application logic loading painting parsing event handling JavaScript layout editing Platform Engine style resolution javascript bindings
- 25. WebKit-based browser WebKit (component) WebCore JavaScript Platform network stack Engine graphics library font engine native widgets abstraction of native components
- 26. WebKit-based browser WebKit (component) WebCore JavaScript Platform Engine V8 or JavaScriptCore parses and executes page logic allows DOM manipulation
- 27. WebCore
- 28. primary data structures parsing & interface: DOM tree layout and rendering: render object tree style tree layer tree line box tree
- 29. main flow
- 30. network engine loading parser
- 31. loader parsing DOM tree
- 32. parsing JavaScript I AP M DO DOM tree att ac h render tree
- 33. DOM tree representation of document document API shadow DOM
- 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. DOM tree style att ac h render tree
- 38. OK!
- 39. render forest render object tree layer tree inline box tree style tree
- 40. render object tree owned by DOM tree only exists for rendered content responsible for layout and paint answers DOM API measurement requests
- 41. 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
- 42. render object tree owned by DOM tree only exists for rendered content responsible for layout and paint answers DOM API measurement requests
- 43. render object tree DOM representation render objects HTMLBodyElement RenderBlock HTMLDivElement RenderBlock Text("foo") RenderText("foo") HTMLSpanElement RenderInline Text("bar") RenderText("bar")
- 44. 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")
- 45. style tree contains all computed style values for renderers owned by render object tree RenderObjects share RenderStyles RenderStyles share data members
- 46. 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
- 47. 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
- 48. 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
- 49. 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
- 50. 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
- 51. 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
- 52. 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
- 53. 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
- 54. 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")
- 55. 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
- 56. 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
- 57. review of main flow loader->parser->DOM tree->render tree render tree: ● RenderObject tree ● RenderLayer tree ● RenderStyle tree ● InlineBoxTree
- 58. 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
- 59. hit testing constant during mouse move multiple phases tree walk from root RenderLayer RenderLayer transforms into local coordinates
- 60. upcoming features component model sub-pixel layout lots lots more
- 61. component model based on shadow DOM hides implementation ● events re-targeted ● shadow children inaccessible by regular DOM defined interface
- 62. shadow DOM tree shadow boundary Do cu m en tt re e shadow host shadow root DOM child DOM child shadow child shadow child
- 63. shadow render tree re nde rt re e shadow host shadow child shadow child
- 64. integer layout layout currently uses integers fractional pixel values truncated breaks at non-1:1 zoom error accumulates
- 65. 1.5x zoom is bad 150px * 1.5x = 225px (15px * 1.5x) * 10 = 220px
- 66. sub-pixel layout integers replaced by fixed-point unit boxes snapped to pixel values supports sub-pixel CSS values error doesn't accumulate
- 67. multi-process browsers centralized resources ● networking ● cache ● compositor ● plugins safety through sandboxing multiple main loops ≈ multi-core
- 68. chrome architecture network stack browser process file io GPU process plugin process plugin processes shared memory gles2.0 instructions render textures processes
- 69. thanks! questions? http://webkit.org http://chromium.org leviw@chromium.org Levi Weintraub