How Servo Renders the Web

1Samsung Open Source Group
How Servo Renders the Web
Adenilson Cavalcanti Msc.
Samsung Open Source Group
WebKit & Blink committer
W3C CSS WG member

2
MotivationMotivation
Rust and ServoRust and Servo
Concepts of Browser EnginesConcepts of Browser Engines
Servo High Level ArchitectureServo High Level Architecture
Anatomy of a CSS FeatureAnatomy of a CSS Feature
Summary

Motivation

All modern browser engines were
designed 15 years ago (KHTML, WebKit,
Gecko, Blink).

They fail to exploit full parallelism.

In both mobile and desktop more cores are
expected (but not faster CPUs).

Issues with Current Browser
Engines

Single-threaded

Javascript execution

Layout

Painting/rasterization

Security issues derived from C/C++

Huge code bases

Servo

New browser engine written in Rust

Parallel: layout, painting, selector matching

Targets performance and battery efficiency

Implementation Strategy

Rewrite layout, rendering, HTML/CSS
parsing, networking, core engine glue.

Reuse JavaScript engine, EME containers,
graphics library, fonts.

Bootstrap with OpenSSL, image libraries,
etc.

Servo Status

Over 120 CSS properties are supported

Rendering real sites nearly correct

Competitive to perf in benchmarks

2x-3x speedups on 4 cores

Rust

What is Rust?
https://www.youtube.com/watch?v=oKwub2OpsG4

The Case for Rust

It aims to solve some gruesome issues
with C/C++.

Be more expressive for hard tasks

Safety vs. performance: you can have
both!

Rust Features

Compiled language (uses llvm)

Memory safety

Concurrency

Parallelism

C++ vs. Rust

13
http://doc.rust-
lang.org/nightly/intro.html#ownership
C++ Example: Anything Wrong
Here?

14
Run on Valgrind: Warnings

15
Using gdb to Understand
What's Happening…

16
AddressAddress
Address: 0x100103af0

17
AddressAddress
It Changed! 0x100103b10

18
Compiler warnings won’t catch it:
Ref Points to Old Address!

19
Rust to the Rescue!

20
Rust Stops Bugs From
Happening


Ownership
– Exactly one variable “owns” an allocated value
– Ownership may be transferred (move)
– Ownership may be temporary (borrow)

Lifetime
– These variables’ scopes provide an upper bound on
how long that value lasts

Memory safety without overhead
– No garbage collector
– No SmartPointers
– No reference counting

Concepts of Browser
Engines

23
How a Browser Works…

24
First OS
50 60 70 80 90 00 10 20
Books?
First
browser
OS books
time
Delay between a disruptive tech becoming widespread
and the textbooks being published
Reasons for Lack of Literature

25
HTMLHTML
CSSCSS
JSJS
Loader /
Parser
Loader /
Parser
DOM
Tree
DOM
Tree
Script
Handler
Script
Handler
Browse
r
UI
Browse
r
UI
Layout* /
Renderin
g
Layout* /
Renderin
g
user-generated input
*Calculating layout is referred as Reflow (Gecko) or Attachment
(WebKit)
High Level Flow

26
More details at: http://arxiv.org/abs/1505.07383
HTML
CSS
JS
DOM
Flow
Tree
Display
Lists
Layers
Final
Output
Parsing Styling
Layout
RenderingCompositing
ScriptScript
Servo High-Level Architecture

27
ConstellationConstellation
RendererRenderer
LayoutLayoutScriptScript
Pipeline 1 (iframe 1)
RendererRenderer
LayoutLayoutScriptScript
Tab 1
RendererRenderer
LayoutLayoutScript
Servo Threading Architecture

Servo Rendering Pipeline
Overview

Content (aka. Script):
– Creates and owns the DOM tree

Layout:
– Takes from content a snapshot of the DOM tree
– Calculates style (attachment), builds the flow tree
– Flow tree used to calculate the layout of nodes
– Layout of nodes used to build a display list

Servo Rendering Pipeline
Overview

Renderer:
– Receives a display list from layout
– Renders visible portions to one or more tiles in parallel

Compositor:
– Composites the tiles from the renderer
– Sends the final image to the screen for display

Blink/WebKit Differences

In Blink, layout will create a RenderTree
with RenderObjects that have geometric
information and know how to paint
themselves.

In Servo, layout will generate a FlowTree
and later DisplayLists are created from it.

Renderer and Compositor
●
Both the Renderer and Compositor are:
– Decoupled from Layout (separate threads)
– Designed for responsiveness
●
Compositor manages its memory.
– Screen is divided into a series of tiles:
– Rendered in parallel
– Required for mobile performance
●
Display lists are divided in sublists (i.e. stack
context):
– Contents can be retained on the GPU
– Rendered in parallel

Parallel Layout Challenges

HTML layout has complex dependencies:
– Inline element positioning
– Floating elements
– Vertical text
– Pagination

Each page is very different, making static
parallelism prediction difficult.

33
div
div
div
Queue
Parallel Layout

Parallelism for Power Too

Force low-frequency CPU setting
– Above four cores, same end-to-end
performance as single core at high-
frequency
– BUT, 40% of the power usage

35
Parallelism Reduces Page
Appearance Time

Servo Detailed Roadmap

https://github.com/servo/servo/wiki/Roadmap

Q2 2015
– Increase Servo quality - work on more sites
– Demonstrate superior end-to-end performance
– Mobile / embedded

2015
– Full Alpha-quality release

Contributions are Welcome!

Servo: github.com/mozilla/servo

Rust: github.com/mozilla/rust | rust-lang.org

#servo | #rust | #rust-internals @ irc.mozilla.org

dev-servo | rust-dev @ lists.mozilla.org

News: http://blog.servo.org/

Servo vs. Gecko: CNN

Servo vs. Gecko: Reddit

Thank You!

How Servo Renders the Web

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (6)

Similar to How Servo Renders the Web

Similar to How Servo Renders the Web (20)

More from Samsung Open Source Group

More from Samsung Open Source Group (20)

Recently uploaded

Recently uploaded (20)

How Servo Renders the Web