Servo

A browser engine for the 21st century

Soledad Penadés
soledadpenades.com
@supersole

Servo

the parallel browser engine

designed for both applications and embedded use

unofficial logo

(demo: Servo in action)

Why?

Why making a new browser? Aren't there enough?

The first website ever
The first web server ever
The first web server ever
AJAX
HTML5
iphones

New needs have arisen

users want safe performant apps running on their portable devices efficiently

developers want to embed part of, or entire browser engines on their apps

they would also like to not worry about C++ memory management or data races

Most modern browsers:

designed pre year 2000

for desktop computers

written in C++

Need to develop browser that...

supports new types of applications and devices

takes advantage of all hardware in a machine

and is secure and modular

Servo is an answer
to these issues

Tackling one problem
at a time

  1. Solid foundations: Rust
  2. Maximising usage of hardware via parallelisation
  3. Embeddable by design

Problem 1: building a solid foundation

Users' demands vs
programmer cost

=== C++ is a liability

Servo addresses those issues by using Rust, a new language which is memory safe by design

Typical C/C++ bugs:

^ all solved either by compile or run-time checks

Developers can focus on writing a great browser engine, not fighting with memory allocations

Rust also makes implementing parallelism foolproof

Rust aims to be as fast (or faster) than C++, and safer than C++

"faster", as in faster software and faster developers

Problem 2: maximising usage of hardware

(to render websites)

But first... how does a browser render a website?

Note: this is going to be a (hopefully not too)
gross simplification

HTML

					
						<body>
							<div>
								<p>Paragraph</p>
								<p>
									Paragraph 2
									<span>(span)</span>
								</p>
							</div>
						</body>
					
				

CSS

					
						body { font-size: 100px; }
						div { min-width: 10px; }
						p { color: red; }
						span { size: 50%; }
					
				

HTML parsing, DOM tree building

rendering DOM tree

Style calculation per node, 1

unstyled nodes

Style calculation per node, 2

styling with body
					
						body { font-size: 100px; }
					
				

Style calculation per node, 3

styling with paragraphs
					
						p { color: red; }
					
				

Style calculation per node, 4

styling with span
					
						span { size: 50%; }
					
				

Flow construction

flow construction

fragments: leaves

flows: containers, or formatting contexts

Flow construction, 2

flow construction

fragments: leaves

flows: containers, or formatting contexts

Bubble inline size

bubble inline size

Computes minimum inline width (size) per element

Assign inline size

assign inline size

(depends on parent size)

Assign block size

assign block size

Finds flows height based on fragments' heights

Display list construction

display list construction

Computes final position for everything...
and then it's off to the renderer!

Traditionally, this process has been very linear

layout steps

Linear, in terms of time

sequential layout steps

Linear:
acceptable in the 90s ūüé∂

Linear:
unnacceptable in mobile

Parallelising is key in mobile platforms

Parallelising can enable more complicated pages in all platforms

Servo does layout in parallel

parallel layout steps
tree
parallelised tree

Layout parallelism in Servo is implemented with a work stealing algorithm

work stealing in the tree
work stealing in the tree

More optimisations: incremental layout

tries to minimise calculations where possible

So far we've only described how Servo builds layout, but not how it renders it

Web Render

An OpenGL based renderer for CSS content

Making the paint step super fast

Why a new renderer?

Why not taking an existing one, e.g. Skia?

Web Render in a nutshell

How it (roughly) works

1) Process display list

					
					Text @ Rect(89px, 89px) at (8px, 23px)
					SolidColor rgba(0, 0, 0, 0) Rect(28px, 72px) at (15px, 30px)
					BoxShadow @ Rect(28px, 72px) at (16px, 31px)
					
				

2) Prepare resources

^ resources retained from frame to frame

3) And draw!

Goodbye to...

Hello to...

(Web Render demos)

mosaics: localhost / web

dogemania: localhost / web

Problem 3: embedding

Servo is designed to be embedded

And you can take as many parts of Servo as you like:
a few components
... or the entire browser!

Servo is modular

Servo is designed to be embedded

What about the ‚ú®future‚ú®?

When can we use Servo as our main browser?

Oxidation

Integrating Rust code into Firefox

No need to wait until Servo is feature complete

Community

servo blog
servo issue filed

Recap

1. Tackling one problem at a time

2. The ‚ú®future‚ú® (Oxidation)

3. Community building efforts pay off

Intrigued?

https://servo.org
@ServoDev

Nightly builds!

https://download.servo.org/

Easy way to contribute: file issues if your favourite website doesn't work
https://github.com/servo/servo/issues/new

Or compile from source

https://github.com/servo/servo/blob/master/README.md

the future is bright

such browser

many parallel

very GPU

wow

thanks!

soledadpenades.com

@supersole

thanks!

wow