Airbnb tech talk: Levi Weintraub on webkit

WebKit! how the web is rendered

Levi Weintraub

me

Intel->Apple->Microsoft->Palm->HP->Google

on and off on WebKit since 2006

adventure motorcyclist

me

Intel->Apple->Microsoft->Palm->HP->Google

on and off on WebKit since 2006




Hi Dad!

rendering engine

browser

rendering engine

primary rendering engines3

primary rendering engines

Trident


Trident

Internet Explorer


GeckoTrident

Internet Explorer


Gecko

Firefox

Trident

Internet Explorer


Gecko

Firefox

Trident

Internet Explorer

WebKit


Gecko

Firefox

Trident

Internet Explorer

WebKit

Chrome, Safari, iOS, Android, Qt, Blackberry,

webOS, Kindle, etc.

Gecko WebKit

FREE!

Gecko

Firefox

WebKit

Chromium

FREE!

over 38%1

1: StatCounter's Global March 2012 http://gs.statcounter.com

history

KHTML + Konquerer

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

anatomy of a WebKit browser

Embedding Application

WebKit (component)

WebCore

JavaScript Engine Platform

pushes WebKit to do workhandles user input

WebKit-based browser

WebKit (component)

WebCore


interface between rendering engine and embedding application


WebKit (component)

WebCore


application logic painting

event handlingeditingjavascript bindings

loadingparsinglayoutstyle resolution


WebKit (component)

WebCore

JavaScript Engine Platform network stack

graphics libraryfont enginenative widgetsabstraction of native components


WebKit (component)

WebCore


V8 or JavaScriptCoreparses and executes page logicallows DOM manipulation

WebCore

primary data structures

parsing & interface:DOM tree

layout and rendering:render object treestyle treelayer treeline box tree

main flow

loading

parser

network engine

parsing

DOM tree

loader

DOM tree

render tree

parsing JavaScript

attach

DOM API

DOM tree

representation of documentdocument APIshadow DOM

DOM tree

<html> <body> <div> foo <span> bar </span> </div> </body></html>

markupHTMLDocument HTMLHTMLElement HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar")

DOM representation

render tree

DOM tree style

attach

OK!

render forest

render object treelayer treeinline box treestyle tree

render object tree

owned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests

12 paint phases!

block backgroundchild block backgroundchild block backgroundsfloatforegroundoutline

child outlinesself outlineselectioncollapsed table borderstext clipmask

render object tree

owned by DOM treeonly exists for rendered contentresponsible for layout and paintanswers DOM API measurement requests

render object tree

HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar")

DOM representationRenderBlock RenderBlock RenderText("foo") RenderInline RenderText("bar")

render objects

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

style tree

contains all computed style values for renderersowned by render object treeRenderObjects share RenderStylesRenderStyles share data members

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

render layer structure

RenderLayerRenderLaye

rRender Layers

RenderLayer


rRender Layers

negative z-index list

positive z-index list

RenderObject

RenderObject RenderObject

render layer painting


rRender Layers

RenderLayer


rRender Layers



RenderObject


1



rRender Layers

RenderLayer


rRender Layers



RenderObject


2



rRender Layers

RenderLayer


rRender Layers



RenderObject


3

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

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

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

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>

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

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

review of main flow

loader->parser->DOM tree->render treerender tree:

● RenderObject tree● RenderLayer tree● RenderStyle tree● InlineBoxTree

animations, blinking carets, layout, etc. trigger invalidations to embedder appapp collects rects, triggers painttree walk from root RenderLayerRenderObjects and InlineBoxes paintGraphicsContext abstraction

paint

hit testing

constant during mouse movemultiple phasestree walk from root RenderLayerRenderLayer transforms into local coordinates

upcoming features

component modelsub-pixel layoutlots lots more

component model

based on shadow DOMhides implementation

● events re-targeted● shadow children inaccessible by regular

DOMdefined interface

shadow DOM tree

shadow host

DOM child DOM child

Document tree

shadow root

shadow child shadow child

shad

ow b

ound

ary

shadow render tree

shadow host

render tree

shadow child shadow child

integer layout

layout currently uses integersfractional pixel values truncatedbreaks at non-1:1 zoomerror accumulates

1.5x zoom is bad

150px * 1.5x = 225px

(15px * 1.5x) * 10 = 220px

sub-pixel layout

integers replaced by fixed-point unitboxes snapped to pixel valuessupports sub-pixel CSS valueserror doesn't accumulate

multi-process browsers

centralized resources● networking● cache● compositor● plugins

safety through sandboxingmultiple main loops ≈ multi-core

plugin process

chrome architecturebrowser processnetwork stack file io

GPU process

plugin processes

render processes

shared memory

gles2.0 instructions

textures

thanks!

questions? http://webkit.orghttp://[email protected]

Levi Weintraub

Airbnb tech talk: Levi Weintraub on webkit

Technology