Wrestling Control from Web Browsers 2 Web Programming Environments 2 Web Programming Environments 2 Web Programming Environments Javascript 3

‣ Sam Baxter ‣ Rachit Nigam ‣ Arjun Guha ‣ Joe Politz ‣ Shriram Krishnamurthi STOPIFY

WRESTLING CONTROL FROM WEB BROWSERS 2 WEB PROGRAMMING ENVIRONMENTS 2 WEB PROGRAMMING ENVIRONMENTS 2 WEB PROGRAMMING ENVIRONMENTS JAVASCRIPT 3

THE BROWSER RUNTIME

Run

function foo() {

let i = 0;

while (true) {

i++;

}

foo (); RUN JAVASCRIPT 3

THE BROWSER RUNTIME

Run Stop

function foo() {

let i = 0;

while (true) {

i++;

}

foo (); RUN JAVASCRIPT 3

THE BROWSER RUNTIME

Run Stop

function foo() {

let i = 0;

while (true) { EVENT QUEUE

i++;

}

foo (); RUNRun JAVASCRIPT 3

THE BROWSER RUNTIME

Run Stop

function foo() {

let i = 0;

while (true) { EVENT QUEUE i++; i = 2 }

} i = 1

foo (); i = 0 RUNRun JAVASCRIPT 3

THE BROWSER RUNTIME

Run Stop

function foo() {

let i = 0;

while (true) { EVENT QUEUE i++; i = 2 } Stop } i = 1

foo (); i = 0 RUNRun JAVASCRIPT 3

THE BROWSER RUNTIME

Run Stop

function foo() { let i = 0; i = 147 while (true) { EVENT QUEUE

i++; i = 2 Stop } Stop } i = 1

foo (); i = 0 RUNRun LANGUAGES THAT COMPILE TO JAVASCRIPT 4 LANGUAGES THAT COMPILE TO JAVASCRIPT 4

MAYBE OTHER LANGUAGES AVOID THIS PROBLEM… LANGUAGES THAT COMPILE TO JAVASCRIPT 4

ALL INHERIT THE LIMITATIONS OF WEB BROWSERS! 5

JavaScript JavaScript

STOPIFY CONTINUATIONS FOR JAVASCRIPT 6

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop

if (n == 0) return false;

else return even(n-1);

}

function even(n) {

if (n == 0) return true;

else return odd(n-1);

}

even(100000) CONTINUATIONS FOR JAVASCRIPT 6

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop

if (n == 0) return false;

else return even(n-1);

} function even(n) { EVENT QUEUE if (n == 0) return true;

else return odd(n-1);

} Run even(100000) CONTINUATIONS FOR JAVASCRIPT 6

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop

if (n == 0) return false;

else return even(n-1);

}

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 6

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop

if (n == 0) return false;

else return even(n-1);

}

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 7

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop

if (n == 0) return false;

else return even(n-1);

}

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 7

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop

if (n == 0) return false;

else return even(n-1);

}

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); Stop odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 7

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop even if (n == 0) return false;

else return even(n-1);

} odd

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); Stop odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 8

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop even if (n == 0) return false;

else return even(n-1);

} odd

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); Stop odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 8

SAVING THE STACK AT RUNTIME even

Run Stop odd

even function odd(n) { Stop even if (n == 0) return false; odd else return even(n-1); even } odd

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); Stop odd } even Run even(100000) CONTINUATIONS FOR JAVASCRIPT 8

SAVING THE STACK AT RUNTIME even

Run Stop odd

even function odd(n) { Stop even if (n == 0) return false; odd else return even(n-1); even } odd

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); odd } even StopRun even(100000) CONTINUATIONS FOR JAVASCRIPT 8

SAVING THE STACK AT RUNTIME

Run Stop

function odd(n) { Stop even if (n == 0) return false;

else return even(n-1);

} odd

function even(n) { even EVENT QUEUE if (n == 0) return true;

else return odd(n-1); odd } even Run even(100000) APPLYING STOPIFY TO PYTHON 9 APPLYING STOPIFY TO PYTHON 9

PYTHON APPLYING STOPIFY TO PYTHON 9

PYTHON PYJS JAVASCRIPT APPLYING STOPIFY TO PYTHON 9

PYTHON PYJS JAVASCRIPT

JAVASCRIPT+CC APPLYING STOPIFY TO PYTHON 9

PYTHON PYJS JAVASCRIPT

JAVASCRIPT+CC

STOPIFY APPLYING STOPIFY TO PYTHON 9

PYTHON PYJS JAVASCRIPT

JAVASCRIPT+CC

STOPIFY

STOPPABLE JAVASCRIPT APPLYING STOPIFY TO PYTHON 10 UNFORTUNATELY, THIS IS SLOW

0 Slowdown relative to PyJS b fib nbody pystone anagram deltablue richards binary_ trees spectral_ norm raytrace_ simple Benchmark UNDERSTANDING THIS SLOWDOWN 11

JAVASCRIPT CALL GRAPH UNDERSTANDING THIS SLOWDOWN 11

JAVASCRIPT CALL GRAPH

EVEN

ODD UNDERSTANDING THIS SLOWDOWN 11

JAVASCRIPT CALL GRAPH

EVEN EVEN

STOPIFY

ODD ODD UNDERSTANDING THIS SLOWDOWN 11

JAVASCRIPT CALL GRAPH

EVEN EVEN

STOPIFY

ODD ODD UNDERSTANDING THIS SLOWDOWN 11

JAVASCRIPT CALL GRAPH

EVEN EVEN

STOPIFY

ODD ODD 12 JAVASCRIPT QUIRKS 13

SPOT THE INFINITE LOOP JAVASCRIPT QUIRKS 13

SPOT THE INFINITE LOOP

x + 1; JAVASCRIPT QUIRKS 13

SPOT THE INFINITE LOOP

const x = { toString: function() { while (true) {} x + 1; } }; x + 1; JAVASCRIPT QUIRKS 13

SPOT THE INFINITE LOOP

const x = { toString: function() { while (true) {} x + 1; } }; x + 1;

‣ Implicit Method Calls

‣ ‘toString’ and ‘valueOf’

‣ Getters and Setters

‣ Dynamic Code Execution (eval) SUBLANGUAGES OF JAVASCRIPT 14

JavaScript SUBLANGUAGES OF JAVASCRIPT 14

JavaScript

valueOf

toString

eval ‘arguments’ object SUBLANGUAGES OF JAVASCRIPT 14

COMPILERS USE RESTRICTED SUB-LANGUAGES

JavaScript

valueOf

toString

eval ‘arguments’ object SUBLANGUAGES OF JAVASCRIPT 14

COMPILERS USE RESTRICTED SUB-LANGUAGES

OCaml JavaScript

valueOf

toString

eval ‘arguments’ object SUBLANGUAGES OF JAVASCRIPT 14

COMPILERS USE RESTRICTED SUB-LANGUAGES

OCaml JavaScript

valueOf

toString

eval ‘arguments’ object SUBLANGUAGES OF JAVASCRIPT 14

COMPILERS USE RESTRICTED SUB-LANGUAGES

OCaml JavaScript

valueOf

toString

Python eval ‘arguments’ object BACK TO PYTHON 15 IMPROVING PERFORMANCE WITH SAFE ASSUMPTIONS

Implicit method calls 30 No implicit method calls

Slowdown 10

0 b fib float nbody pystone richards deltablue scimark−fft binary_trees spectral_norm Benchmark BACK TO PYTHON 15 IMPROVING PERFORMANCE WITH SAFE ASSUMPTIONS

Implicit method calls 30 No implicit method calls Median 20 Slowdown

Slowdown 10 1.7x

0 b fib float nbody pystone richards deltablue scimark−fft binary_trees spectral_norm Benchmark EVALUATION 16

OPTIMIZATIONS EVALUATION 16

OPTIMIZATIONS

C++ Java Scala … Python OCaml Clojure

LANGUAGE EVALUATION 16

OPTIMIZATIONS

PLATFORM Chrome

Firefox

Safari

Microsoft Edge

ChromeOS

C++ Java Scala … Python OCaml Clojure

LANGUAGE EVALUATION 16

OPTIMIZATIONS

PLATFORM Chrome

Firefox

Safari

Microsoft Edge

ChromeOS

C++ Java Scala … Python OCaml Clojure

LANGUAGE Implicit Functions

‘arguments’

Stack Representation IMPLEMENTATION … EVALUATION 17

C++ (Emscripten) Clojure (ClojureScript) Dart (dart2js)

1.00 ● ● ● ● 1.00 ● ● ● ● ● ● ● ● ● 1.00 ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● 0.75 0.75 ● 0.75 ● ● ● 0.50 0.50 0.50 Chrome (11.6) Chrome (9.1) Chrome (3.0) ● ● ChromeBook (10.8) ● ChromeBook (11.2) ● ChromeBook (5.0)

% of trials % of trials ● % of trials 0.25 ● Edge (30.5) 0.25 ● Edge (13.2) 0.25 Edge (7.0) Firefox (11.0) ● Firefox (17.7) Firefox (3.4) Safari (8.4) Safari (5.4) Safari (1.7) 0.00 ● 0.00 ● 0.00 ● 0 50 100 150 0 10 20 30 40 50 0 10 20 30 40 Slowdown Slowdown Slowdown Java (JSweet) JavaScript OCaml (BuckleScript)

1.00 ● ● ● ● ● ● ● ● ● ● ● ● ● 1.00 ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● 1.00 ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● 0.75 0.75 0.75 ● ● ● 0.50 ● 0.50 0.50 ● Chrome (8.1) Chrome (20.0) Chrome (5.4) ● ChromeBook (6.0) ● ChromeBook (14.6) ● ChromeBook (5.7) % of trials 0.25 Edge (20.9) % of trials 0.25 Edge (37.2) % of trials 0.25 Edge (7.2) Firefox (9.2) Firefox (24.8) Firefox (8.9) Safari (6.3) Safari (13.7) ● Safari (4.2) 0.00 ● 0.00 ● 0.00 ● 0 20 40 60 0 200 400 0 20 40 Slowdown Slowdown Slowdown Python (PyJS) Scala (ScalaJS) Scheme (scheme2js)

1.00 ● ● ● ● ● ● 1.00 ● ● ● ● ● ● ● ● ● ● 1.00 ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● 0.75 0.75 0.75 ● ● ● ● 0.50 0.50 0.50 Chrome (1.7) Chrome (14.6) Chrome (8.8) ● ● ● ChromeBook (1.4) ● ChromeBook (20.2) ● ChromeBook (9.0) % of trials 0.25 Edge (3.8) % of trials 0.25 Edge (17.2) % of trials 0.25 Edge (18.2) ● Firefox (3.4) ● Firefox (23.9) ● Firefox (13.5) Safari (2.0) Safari (11.8) Safari (6.5) 0.00 ● 0.00 ● 0.00 ● ● ● 0 5 10 15 0 40 80 120 0 10 20 30 40 Slowdown Slowdown Slowdown EVALUATION 17

C++ (Emscripten) Clojure (ClojureScript) Dart (dart2js)

WRESTLING CONTROL FROM WEB BROWSERS