WebKit Rendering: How Browsers Display Web Pages

WebKit!
how the web is rendered

Levi Weintraub

me

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

on and off on WebKit since 2006

adventure motorcyclist

Hi Dad!

adventure motorcyclist

primary rendering engines

Trident


Trident

Internet Explorer


Trident Gecko

Internet Explorer


Trident Gecko

Internet Explorer Firefox


Trident Gecko WebKit

Internet Explorer Firefox


Trident Gecko WebKit

Internet Explorer Firefox Chrome, Safari, iOS,
Android, Qt, Blackberry,
webOS, Kindle, etc.

Gecko WebKit

FREE!

Firefox Chromium

over 38%1

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

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

Embedding Application pushes WebKit to do work
handles user input
WebKit (component)

WebCore

JavaScript
Platform
Engine

WebKit-based browser

WebKit (component) interface between
rendering engine and
embedding application
WebCore

JavaScript
Platform
Engine


WebKit (component)

WebCore application logic
loading painting
parsing event handling
JavaScript layout editing
Platform
Engine style resolution javascript bindings


WebKit (component)

WebCore

JavaScript
Platform network stack
Engine
graphics library
font engine
native widgets
abstraction of native components


WebKit (component)

WebCore

JavaScript
Platform
Engine

V8 or JavaScriptCore
parses and executes page logic
allows DOM manipulation

primary data structures

parsing & interface:
DOM tree
layout and rendering:
render object tree
style tree
layer tree
line box tree

network engine

loading

parser

loader

parsing

DOM tree

parsing JavaScript
I
AP
M
DO

DOM tree
att
ac
h

render tree

DOM tree

representation of document
document API
shadow DOM

DOM tree
markup DOM representation
<html> HTMLDocument
<body> HTMLHTMLElement
<div> HTMLBodyElement
foo HTMLDivElement
<span> Text("foo")
bar HTMLSpanElement
</span> Text("bar")
</div>
</body>
</html>

DOM tree style
att
ac
h

render tree

render forest

render object tree
layer tree
inline box tree
style tree

render object tree

owned by DOM tree
only exists for rendered content
responsible for layout and paint
answers DOM API measurement requests

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

render object tree
DOM representation render objects
HTMLBodyElement RenderBlock
HTMLDivElement RenderBlock
Text("foo") RenderText("foo")
HTMLSpanElement RenderInline
Text("bar") RenderText("bar")

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

style tree

contains all computed style values for renderers
owned by render object tree
RenderObjects share RenderStyles
RenderStyles share data members

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

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

render layer painting

RenderLaye
RenderLaye
r
Render
r
Layers
1
RenderLayer

RenderLaye
RenderLaye
r
Render
r
Layers

RenderObject



RenderLaye
RenderLaye
r
Render
r
Layers
2

RenderLayer

RenderLaye
RenderLaye
r
Render
r
Layers

RenderObject



RenderLaye
RenderLaye
r
Render
r
Layers

RenderLayer 3

RenderLaye
RenderLaye
r
Render
r
Layers

RenderObject


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

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

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

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

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

review of main flow

loader->parser->DOM tree->render tree
render tree:
● RenderObject tree
● RenderLayer tree
● RenderStyle tree
● InlineBoxTree

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

hit testing

constant during mouse move
multiple phases
tree walk from root RenderLayer
RenderLayer transforms into local coordinates

upcoming features

component model
sub-pixel layout
lots lots more

component model

based on shadow DOM
hides implementation
● events re-targeted
● shadow children inaccessible by regular
DOM
defined interface

shadow DOM tree

shadow boundary
Do
cu
m
en
tt
re
e

shadow host shadow root

DOM child DOM child shadow child shadow child

shadow render tree
re
nde
rt
re
e

shadow host

shadow child shadow child

integer layout

layout currently uses integers
fractional pixel values truncated
breaks at non-1:1 zoom
error accumulates

1.5x zoom is bad

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

sub-pixel layout

integers replaced by fixed-point unit
boxes snapped to pixel values
supports sub-pixel CSS values
error doesn't accumulate

multi-process browsers

centralized resources
● networking
● cache
● compositor
● plugins
safety through sandboxing
multiple main loops ≈ multi-core

chrome architecture
network stack browser process file io

GPU process

plugin process
plugin processes

shared memory

gles2.0 instructions
render
textures
processes

thanks!

questions?

http://webkit.org
http://chromium.org
leviw@chromium.org

Levi Weintraub

WebKit Rendering: How Browsers Display Web Pages

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to WebKit Rendering: How Browsers Display Web Pages

Similar to WebKit Rendering: How Browsers Display Web Pages (9)

Recently uploaded

Recently uploaded (20)

WebKit Rendering: How Browsers Display Web Pages