how servo renders the web

Adenilson CavalcantiBSc MSc

WebKit & Blink committerW3C CSS WG member

How Servo renders the Web

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.

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,

• 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

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

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

High level flow

Loader /Parser

DOMTree

ScriptHandler

BrowserUI

Layout* /Render-

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

Servo threading architecture

Constella-tion

Renderer

Lay-outScript

Pipeline 1 (iframe 1)

Renderer

Lay-outScript

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

• 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

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

overexpressed wafl/cipl renders glioblastoma...

lamina proyecto y renders

renders aaat&agla4dct

texto - renders, h. religio pectorum... (1)

renders dande

proyecto venus - renders de las propuestas

multiscope - christophe renders - smart consumer summit...

renders edificios

linear-servo-roboter linear-servo-roboter linear … ·...

3ds max renders

renders rjherdocia

imagenes, láminas y renders

digital espacios 3d "renders"

como cobrar tus renders

total solution encoder / servo motor / servo driver / motion...

how to interface a microchip pic mcu with a hobby r/c servo

elizabete cristina costa renders

portafolio de renders

tutorial_ como hacer renders sin photoshop - taringa!

maria romaní portfolio renders