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
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
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
