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

4. adventure motorcyclist

5. Hi Dad! adventure motorcyclist

6. rendering engine

7. browser rendering engine

8. 3 primary rendering engines

9. primary rendering engines Trident

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

19. KHTML + Konquerer

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

Airbnb tech talk: Levi Weintraub on webkit

Airbnb tech talk: Levi Weintraub on webkit

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Airbnb tech talk: Levi Weintraub on webkit

Similar to Airbnb tech talk: Levi Weintraub on webkit(9)

Recently uploaded

Recently uploaded(20)

Airbnb tech talk: Levi Weintraub on webkit