1 of 63

Servo Architecture: Safety & Performance

Jack Moffitt // Mozilla Research // LCA 2017

2 of 63

1994

3 of 63

4 of 63

1994 Pentium

5 of 63

2002 Pentium IV

6 of 63

2008 Nehalem

7 of 63

8 of 63

Let’s rewrite C++ from scratch so that we can rewrite a browser from scratch.

9 of 63

How do we make Servo fast?

  • Parallel styling
  • Parallel layout
  • Constellation
  • WebRender
  • (more on the way)

10 of 63

How do we make Servo fast?

  • Parallel styling
  • Parallel layout
  • Constellation
  • WebRender
  • (more on the way)

LCA 2015

11 of 63

CONSTELLATION

12 of 63

SINGLE PROCESS

13 of 63

Monolithic Engine

14 of 63

Monolithic Engine v2

15 of 63

MULTIPROCESS

16 of 63

Two Processes

17 of 63

N Processes

18 of 63

If One Tab Fails...

19 of 63

Only Its Process Fails

20 of 63

Sandboxing

21 of 63

THREADS

22 of 63

Thread per Tab

23 of 63

Multiprocess Thread per Tab

24 of 63

Summary

  • More responsive; tabs and chrome don’t block each other from running
  • More secure; content processes can be sandboxed
  • More robust to failure; content process failure can be trapped and dealt with

25 of 63

IS THIS THE BEST WE CAN DO?

26 of 63

Apply Parallelism

Let JavaScript and layout run simultaneously

27 of 63

PIPELINE

28 of 63

Single Pipeline

29 of 63

Pipeline with Cross-Domain Iframes

30 of 63

31 of 63

cross-domain iframe from as.jivox.com

32 of 63

Pipeline with Sync Iframes

33 of 63

CONSTELLATION

34 of 63

Multiple Tabs

35 of 63

Remember, If One Tab Fails...

36 of 63

Only Its Process Fails

37 of 63

Rust Can Fail Better

38 of 63

Most Failures Stop at Thread Boundaries

39 of 63

SANDBOXING & SECURITY

40 of 63

Multiprocess Constellation

41 of 63

More Processes More Better

42 of 63

WEBRENDER

43 of 63

2008 Nehalem

44 of 63

2016 Skylake

45 of 63

Using the GPU

  • Computation on the GPU frees up CPU resources
  • GPU is much faster at certains kinds of tasks
  • Easiest place to start is rendering

46 of 63

But, but, but...

Don’t browsers already use GPUs?

​

Sort of...

47 of 63

WebRender Key Ideas

  • Retained mode instead of immediate mode
  • Designed for rendering CSS content
  • Draw the whole frame every frame

pub enum SpecificDisplayItem {

Rectangle(...),

Text(...),

Image(...),

YuvImage(...),

WebGL(...),

Border(...),

BoxShadow(...),

Gradient(...),

Iframe(...),

PushStackingContext(...),

PopStackingContext,

PushScrollLayer(...),

PopScrollLayer,

}

48 of 63

Rendering Pipeline

  1. Divide screen into tiles
  2. Tile assignment, occlusion culling & CPU work requests
  3. Compile render task tree for each tile
  4. Merge & assign render targets
  5. Create batches for each render target
  6. Execute batches

49 of 63

Example: Box Shadow

  • Render a single corner and a single pixel on each end
  • Copy corner 3x & stretch the border for the vertical and horizontal edges

50 of 63

Example: Text

  • During tile assignment, schedule CPU work to rasterize and upload glyph texture
  • Blit glyphs from glyph texture
  • Do vertical blurring pass for text shadow
  • Do horizontal blurring pass for text shadow

51 of 63

52 of 63

53 of 63

PROJECT QUANTUM

54 of 63

Main Quantum Particles

  • Quantum DOM - better scheduling, concurrency
  • Quantum Style (Stylo) - Servo’s CSS engine
  • Quantum Render - Servo’s WebRender

55 of 63

Stylo on Wikipedia

56 of 63

Stylo on HTML5 Spec

57 of 63

RESEARCH IN PROGRESS

58 of 63

Pathfinder - GPU Font Rasterizer

59 of 63

Magic DOM

  • Explore ways to achieve significant performance wins in JS / DOM integration
  • Discussed for years, but a concrete proposal presented last year seemed fairly promising
  • Fusing reflectors and DOM objects
  • Self hosted JS

60 of 63

External Research Collaborations

  • Machine learning (Rohit Zambre at UC Irvine)
  • Power management (Connor Imes at U. Chicago)
  • Incremental computation (Kyle Headley at U. Colorado)
  • WebBluetooth (Gabor Loki et al, University of Szeged)
  • Software transactional memory (Alan Jeffrey)

61 of 63

GETTING INVOLVED

62 of 63

Unique Developers by Browser

http://mo.github.io/2015/11/04/browser-engines-active-developers-and-commit-rates.html

63 of 63

How to Get Involved