How Servo Renders the Web Faster

1 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley)
Adenilson Cavalcanti
BSc MSc
WebKit & Blink committer
W3C CSS WG member
How Servo renders the Web

2Open Source Group – Samsung Research America (Silicon Valley) © 2014 Samsung Electronics Co.
Summary
Motivation
Rust and Servo
Concepts of Browser engines
Servo high level architecture
Anatomy of a CSS feature

• All modern browser engines were designed 15 years
ago (KHTML, WebKit, Gecko, Blink).
• They fail to exploit full parallelism.
• Both in mobile and desktop we expect more cores
(but not faster clocked CPUs).
Motivation

• Single-threaded:
• Javascript execution
• Layout
• Painting/rasterization
• Security issues derived from C/C++.
• Huge code bases.
Issues of current browser engines

• New browser engine written in Rust.
• Parallel: layout, painting, selector matching.
• Targeting performance and battery saving.
Servo

Demo
Running servo.

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.

• Over 120 CSS properties are supported.
• Rendering real sites near correctly.
• Competitive perf in benchmarks.
• 2x-3x speedups on 4 cores.
Servo status

Rust

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

Why Rust?
• It aims to solve some gruesome issues in
C/C++.
• Be more expressive for hard tasks.
• Safety X performance: have both!
The case for Rust

• Compiled language (uses llvm).
• Memory safety.
• Concurrency.
• Parallelism.
Rust features

C++ x Rust

C++ example: anything
wrong here?
http://doc.rust-lang.org/nightly/intro.html#ownership

Run on valgrind: warnings

Using gdb to understand
what is happening…

Address: 0x100103af0
Address

Change! Now: 0x100103b10
Address

Ref points to old address!
Compiler warnings won’t catch it:

Rust to the rescue!

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 GC
– No SmartPointers
– No reference counting

Concepts of browser engines

How a browser works…

Reasons for lack of literature
First OS
50 60 70 80 90 00 10 20
Books?
First browse
r
OS books
time
Delay between a disruptive tech becoming widespread and t
he textbooks being published

High level flow
HTML
CSS
JS
Loader /
Parser
DOM
Tree
Script
Handler
Browser
UI
Layout* /
Rendering
user-generated input
*Calculating layout is referred as Reflow (Gecko) or Attachment (WebKit)

Servo high-level architecture
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 threading architecture
Constellation
Renderer
LayoutScript
Pipeline 1 (iframe 1)
Renderer
LayoutScript
Tab 1
Renderer
LayoutScript

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), building the flow tree
• Flow tree used to calculate the layout of nodes
• Layout of nodes used to build a display list
• 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

• 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.
Blink/WebKit Differences

Renderer and Compositor
• Both Renderer and Compositor are:
• Decoupled from Layout (separate threads)
• Design aimed at 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

Demo
• Dump flowtree, display lists.
• Parallel layout, parallel painting.

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.

Parallel layout
div
div
div
Queue

Parallelism reduces page appearance
time

CSS filter blur
Code analysis.

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

Contributing to Servo &
Rust
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/

Special thanks
• Samsung OSG (OpenSource Group).
• Lars Bergstrom (Mozilla).
• Bruno Abinader (Mapbox).

Questions?

Thank you.

Servo vs. Gecko (CNN)

Servo vs. Gecko (reddit)

How Servo Renders the Web Faster

Recommended

Recommended

More Related Content

Similar to How Servo Renders the Web Faster

Similar to How Servo Renders the Web Faster (20)

Recently uploaded

Recently uploaded (20)

How Servo Renders the Web Faster

Editor's Notes