airbnb tech talk: levi weintraub on webkit
DESCRIPTION
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_talksTRANSCRIPT
![Page 1: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/1.jpg)
WebKit! how the web is rendered
Levi Weintraub
![Page 2: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/2.jpg)
me
Intel->Apple->Microsoft->Palm->HP->Google
on and off on WebKit since 2006
adventure motorcyclist
![Page 3: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/3.jpg)
me
Intel->Apple->Microsoft->Palm->HP->Google
on and off on WebKit since 2006
adventure motorcyclist
![Page 4: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/4.jpg)
adventure motorcyclist
![Page 5: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/5.jpg)
adventure motorcyclist
Hi Dad!
![Page 6: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/6.jpg)
rendering engine
![Page 7: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/7.jpg)
browser
rendering engine
![Page 8: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/8.jpg)
primary rendering engines3
![Page 9: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/9.jpg)
primary rendering engines
Trident
![Page 10: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/10.jpg)
primary rendering engines
Trident
Internet Explorer
![Page 11: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/11.jpg)
primary rendering engines
GeckoTrident
Internet Explorer
![Page 12: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/12.jpg)
primary rendering engines
Gecko
Firefox
Trident
Internet Explorer
![Page 13: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/13.jpg)
primary rendering engines
Gecko
Firefox
Trident
Internet Explorer
WebKit
![Page 14: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/14.jpg)
primary rendering engines
Gecko
Firefox
Trident
Internet Explorer
WebKit
Chrome, Safari, iOS, Android, Qt, Blackberry,
webOS, Kindle, etc.
![Page 15: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/15.jpg)
Gecko WebKit
FREE!
![Page 16: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/16.jpg)
Gecko
Firefox
WebKit
Chromium
FREE!
![Page 17: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/17.jpg)
over 38%1
1: StatCounter's Global March 2012 http://gs.statcounter.com
![Page 18: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/18.jpg)
history
![Page 19: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/19.jpg)
KHTML + Konquerer
![Page 20: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/20.jpg)
1998
KHT
ML
relea
sed
2001
Web
Kit s
ecre
tly fo
rked
by A
pple
2002
Java
Scrip
tCor
e re
lease
d
2003
Web
Core
& S
afar
i rele
ased
2005
Web
Kit o
pen
sour
ced
2007
Saf
ari fo
r Wind
ows
2008
Goo
gle C
hrom
e re
lease
d fo
r Wind
ows
2010
KDE
re-in
tegr
ates
Web
Kit -
Web
Kit2
ann
ounc
ed
2012
Web
Kit d
omina
nt w
eb p
latfo
rm
???
Prof
it!!
2009
Chr
ome
Beta
for M
ac O
S X
and
Linux
![Page 21: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/21.jpg)
anatomy of a WebKit browser
![Page 22: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/22.jpg)
Embedding Application
WebKit (component)
WebCore
JavaScript Engine Platform
pushes WebKit to do workhandles user input
![Page 23: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/23.jpg)
WebKit-based browser
WebKit (component)
WebCore
JavaScript Engine Platform
interface between rendering engine and embedding application
![Page 24: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/24.jpg)
WebKit-based browser
WebKit (component)
WebCore
JavaScript Engine Platform
application logic painting
event handlingeditingjavascript bindings
loadingparsinglayoutstyle resolution
![Page 25: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/25.jpg)
WebKit-based browser
WebKit (component)
WebCore
JavaScript Engine Platform network stack
graphics libraryfont enginenative widgetsabstraction of native components
![Page 26: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/26.jpg)
WebKit-based browser
WebKit (component)
WebCore
JavaScript Engine Platform
V8 or JavaScriptCoreparses and executes page logicallows DOM manipulation
![Page 27: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/27.jpg)
WebCore
![Page 28: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/28.jpg)
primary data structures
parsing & interface:DOM tree
layout and rendering:render object treestyle treelayer treeline box tree
![Page 29: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/29.jpg)
main flow
![Page 30: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/30.jpg)
loading
parser
network engine
![Page 31: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/31.jpg)
parsing
DOM tree
loader
![Page 32: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/32.jpg)
DOM tree
render tree
parsing JavaScript
attach
DOM API
![Page 33: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/33.jpg)
DOM tree
representation of documentdocument APIshadow DOM
![Page 34: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/34.jpg)
DOM tree
<html> <body> <div> foo <span> bar </span> </div> </body></html>
markupHTMLDocument HTMLHTMLElement HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar")
DOM representation
![Page 35: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/35.jpg)
render tree
DOM tree style
attach
![Page 36: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/36.jpg)
![Page 37: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/37.jpg)
![Page 38: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/38.jpg)
OK!
![Page 39: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/39.jpg)
render forest
render object treelayer treeinline box treestyle tree
![Page 40: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/40.jpg)
render object tree
owned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests
![Page 41: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/41.jpg)
12 paint phases!
block backgroundchild block backgroundchild block backgroundsfloatforegroundoutline
child outlinesself outlineselectioncollapsed table borderstext clipmask
![Page 42: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/42.jpg)
render object tree
owned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests
![Page 43: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/43.jpg)
render object tree
HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar")
DOM representationRenderBlock RenderBlock RenderText("foo") RenderInline RenderText("bar")
render objects
![Page 44: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/44.jpg)
anonymous blocks
HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar") HTMLDivElement Text("baz")
DOM representationRenderBlock RenderBlock RenderBlock(anonymous) RenderText("foo") RenderInline RenderText("bar") RenderBlock RenderText("baz")
render objects
![Page 45: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/45.jpg)
style tree
contains all computed style values for renderersowned by render object treeRenderObjects share RenderStylesRenderStyles share data members
![Page 46: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/46.jpg)
render layer tree
like 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 to renderers
![Page 47: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/47.jpg)
render layer structure
RenderLayerRenderLaye
rRender Layers
RenderLayer
RenderLayerRenderLaye
rRender Layers
negative z-index list
positive z-index list
RenderObject
RenderObject RenderObject
![Page 48: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/48.jpg)
render layer painting
RenderLayerRenderLaye
rRender Layers
RenderLayer
RenderLayerRenderLaye
rRender Layers
negative z-index list
positive z-index list
RenderObject
RenderObject RenderObject
1
![Page 49: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/49.jpg)
render layer painting
RenderLayerRenderLaye
rRender Layers
RenderLayer
RenderLayerRenderLaye
rRender Layers
negative z-index list
positive z-index list
RenderObject
RenderObject RenderObject
2
![Page 50: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/50.jpg)
render layer painting
RenderLayerRenderLaye
rRender Layers
RenderLayer
RenderLayerRenderLaye
rRender Layers
negative z-index list
positive z-index list
RenderObject
RenderObject RenderObject
3
![Page 51: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/51.jpg)
render layer painting, software
paint the intersection of the paint dirty rect with all intersecting layers in orderall layers render into the same output buffer
![Page 52: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/52.jpg)
render layer painting, hw accelerated
some RenderLayers have backing store GPU textureused for 3D transforms, <video>, <canvas>/ plugins with 3D, stacking contexts, or sub-framesdirtied RenderLayers paint to GPU textureGPU composites textures onto final output buffer
![Page 53: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/53.jpg)
line box tree
owned 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
![Page 54: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/54.jpg)
line box tree
RenderBlock(div) RenderText("foo") RenderInline(b) RenderText("bar") RenderBR RenderText("baz")
render treeRenderBlock(div) RootInlineBox InlineTextBox("foo") InlineFlowBox(b) InlineTextBox(b) InlineBox(br) RootInlineBox InlineTextBox("baz")
line box tree
Markup: <div>foo<b>bar</b><br>baz</div>
![Page 55: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/55.jpg)
layout
changes 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
![Page 56: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/56.jpg)
layout
changes 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
![Page 57: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/57.jpg)
review of main flow
loader->parser->DOM tree->render treerender tree:
● RenderObject tree● RenderLayer tree● RenderStyle tree● InlineBoxTree
![Page 58: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/58.jpg)
animations, blinking carets, layout, etc. trigger invalidations to embedder appapp collects rects, triggers painttree walk from root RenderLayerRenderObjects and InlineBoxes paintGraphicsContext abstraction
paint
![Page 59: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/59.jpg)
hit testing
constant during mouse movemultiple phasestree walk from root RenderLayerRenderLayer transforms into local coordinates
![Page 60: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/60.jpg)
upcoming features
component modelsub-pixel layoutlots lots more
![Page 61: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/61.jpg)
component model
based on shadow DOMhides implementation
● events re-targeted● shadow children inaccessible by regular
DOMdefined interface
![Page 62: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/62.jpg)
shadow DOM tree
shadow host
DOM child DOM child
Document tree
shadow root
shadow child shadow child
shad
ow b
ound
ary
![Page 63: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/63.jpg)
shadow render tree
shadow host
render tree
shadow child shadow child
![Page 64: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/64.jpg)
integer layout
layout currently uses integersfractional pixel values truncatedbreaks at non-1:1 zoomerror accumulates
![Page 65: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/65.jpg)
1.5x zoom is bad
150px * 1.5x = 225px
(15px * 1.5x) * 10 = 220px
![Page 66: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/66.jpg)
sub-pixel layout
integers replaced by fixed-point unitboxes snapped to pixel valuessupports sub-pixel CSS valueserror doesn't accumulate
![Page 67: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/67.jpg)
multi-process browsers
centralized resources● networking● cache● compositor● plugins
safety through sandboxingmultiple main loops ≈ multi-core
![Page 68: Airbnb tech talk: Levi Weintraub on webkit](https://reader031.vdocument.in/reader031/viewer/2022020217/54b731df4a7959cd448b457a/html5/thumbnails/68.jpg)
plugin process
chrome architecturebrowser processnetwork stack file io
GPU process
plugin processes
render processes
shared memory
gles2.0 instructions
textures