how servo renders the web

1 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley)

Adenilson CavalcantiBSc MSc

WebKit & Blink committerW3C 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 de-signed 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 en-gines


• New browser engine written in Rust.

• Parallel: layout, painting, selec-tor matching.

• Targeting performance and bat-tery 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 cor-rectly.

• Competitive perf in bench-marks.

• 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 grue-some 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

Ad-dress


Change! Now: 0x100103b10

Ad-dress


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 browser

OS books

time

Delay between a disruptive tech becoming widespread and the textbooks being published


High level flow

HTML

CSS

JS

Loader /Parser

DOMTree

ScriptHandler

BrowserUI

Layout* /Render-

ing

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

HTMLCSSJS

DOM FlowTree

DisplayListsLayersFinal

Output

Parsing Styling

Layout

RenderingCompositing

ScriptScript

http://arxiv.org/abs/1505.07383


Servo threading architecture

Constella-tion

Renderer

Lay-outScript

Pipeline 1 (iframe 1)

Renderer

Lay-outScript


Tab 1

Renderer

Lay-outScript



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 geomet-ric information and know how to paint themselves.

• In Servo, layout will generate a FlowTree and later DisplayLists are cre-ated 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 con-text):• 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 layoutdivdivdiv

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

Technology