Leo Meyerovich, Thibaud Hottelier, Matthew Torok,

Eric Atkinson, Edward Lu, Ras Bodik

Seth Fowler (Mozilla), Chris Jones (Mozilla), Adam Jiang (Oracle)

James Ide (Facebook)

THE PARALLEL BROWSER

& PROGRAM SYNTHESIS

1

2007: Future of the Browser? 1) Web on 1 Watt 2) Visualization

2

Obstacle: Programmability

Parallel JavaScript

Parallel Browser Impl.

Parallel Browser APIs

Schedule? Data

representation?

Correctness?

Program Synthesis!

3

Parallelism for Energy Efficiency

Mobile Today

200 sites @ 4.5 Watt-

Hours

4-8 cores x 128b SIMD

GPGPU (ARM Mali)

4

Big Data Needs a Frontend

5

Analysis Result: No

6

BIG

INTERACTIVE

VISUALIZATIONS

What to Parallelize in the Browser?

parser

selector engine

12%

layout engine

renderer

JavaScript

29%

20%

23%

10%

“LaTeX”

“Game”

“Compiler”

7

Parallel Browser System Design

Parser

Selectors

Layout

Renderer

HTML data CSS styling

JS script

Pixels

Java

Scri

pt

VM

8

4. automatic parallelization

1. parallel components

2. parallel event loop

3. multiple design expt’s

4. automatic parallelization

Parallel Browser System Design

Parser

Selectors

Layout

Renderer

HTML data CSS styling

JS script

Pixels

Java

Scri

pt

VM

9

1. parallel components

2. parallel event loop

GPU** [Intel, Qualcomm, Mozilla,

Microsoft, Samsung]

[Intel, Qualcomm, Mozilla]

multicore*

multicore

multicore + SIMD

GPU

MIMD + GPU

[HotPar’09]

[WWW’10]

[PPOPP’13, HotPar’11]

[LASH-C’13]

[WWW’10, PPOPP’13]

1

2

3

4

5

6

1 2 3 4

spee

du

p

cores optimized baseline

0X

2X

4X

Av. Speedup

3. multiple designs

Layout

Engine

100K+ lines of

code

webpage

Parallel Programming w/ Synthesis

Output: locks (Armando L.), SIMD, Green Arrays, SQL, …

Synthesiz

er

layout widgets

attribute grammar Parallel schedule of

tree traversals

10

Layout

Engine

100K+ lines of

code

webpage

Parallel Programming w/ Synthesis

Synthesiz

er

layout widgets

attribute grammar Parallel schedule of

tree traversals

class Paragraph:

word1.w + word2.w = self.w

…

//Constraints: bidirectional, OO, …

11

sched= {w,h}; {x,y}; {…}; …

Leaf

Schedule Layout as Parallel Tree Traversals!

w,h w,h

w,h w,h

w,h

w,h x,y …

sched valid for all webpages (in subset)

[WWW 2010, PPOPP 2013]

w0=sum(w1,w2) h0=max(h1,h2)

document tree

constraints on node attributes logical joins

logical spawns

12

Synthesizer automatically schedules

How to Control Parallel Traversals

_ ;_ ;_ ;_;_ ;_;nest({Text,Font,Inline}, _);_;_

OK: rescheduling attribs

w, h

bug: less parallelism!

sequential_inorder{y,r}

Structured programming: Helped sharing code, testing ideas, and debugging

Hole for code to generate via synthesis: , {x,y}, “||”, …

Synthesizer rejects programs that cannot obey sketch

13

CSS 1.0, 2.0, 2.1, 3.0, 4.0, …

• Edits should not break schedule

• But do want to manually

parallelize

Lessons

Parallel Browser

Requires algorithms,

automation

Surprise wins:

mobile, data viz, layout tools

Program Synthesis

Future of patterns,

autotuning

Helps both novices &

experts

14