Super Saiyan JavaScript

About me

Imanol Fernández

Lead Developer at Ludei
C/C++, JS, iOS, Android & Graphics guy
Games, high Level & low Level stuff
Obsessed with raw performance
Dragon Ball & Metal Gear Solid ultra fan
@MortimerGoro

Today, we're going to talk about

JavaScript perfomance

Understand how a modern JS Engine works
Profile and Write optimized code mindfully
C++ vs JS performance example

Rendering Performance

Canvas 2D tips
WebGL tips
Common pitfalls

CocoonJS

How does it work?
Challenges

The JavaScript nature

Extremely sensitive language
Limited compile-time type information

A modern JS engine uses two compilers

ASAP compiler (aka Yamcha)

Quickly generate unoptimized JIT code
No type inference at compile time

Optimized compiler (aka Goku)

High performance JIT Code
Based on runtime heuristics and inferences

How does a JS Engine evaluate a variable?


function Test(a, b) {
    this.a = a;
    this.b = b;
}
Test.prototype = {
    hello: function() {
        console.log(mortimer);		
    }
}
var test = new Test(1,2);
test.hello();

Function scope

Prototype scope

Global scope

ReferenceError: mortimer is not defined

How does a Browser evaluate a variable?


function Test(a, b) {
    this.a = a;
    this.b = b;
}
Test.prototype = {
    hello: function() {
        console.log(mortimer);		
    }
}
var test = new Test(1,2);
test.hello();

Function scope

Prototype scope

Global scope

document.getElementById!


var div = document.createElement("div");
div.id = "mortimer";
document.body.appendChild(div);
test.hello(); //or window.mortimer


<head><script src="jquery.js"></script></head>
<body>
	<canvas id="mycanvas"></canvas>
	<script type="text/javascript">
		var canvas = $('#mycanvas');
	</script>
</body>


<body>
	<canvas id="mycanvas"></canvas>
	<script type="text/javascript">
		var canvas = mycanvas;
	</script>
</body>

Mutenroshi's Tips

Avoid long prototype chains
Avoid global scope variables or flags

Hidden classes

Optimized compiler creates hidden classes for objects at runtime


function Sprite(x, y, data) {
	this.x = x;
	this.y = y;
	this.data = data;
}
var sprite1 = new Sprite(100,200,0);
var sprite2 = new Sprite(300,300,0);

JIT creates a 'Sprite' class in the first constructor call
Next constructor calls reutilize the same class
Functions that use the same hidden classes are optimized


sprite1.tag = 11; /*Warning! Another hidden class*/


var sprite3 = new Sprite(50,50, "id43"); /*Warning! Another hidden class*/

Mutenroshi's Tips

Initialize all object members in the constructor function
Always use the same types for the members
Don't use more than ~30 members: Hidden class => Hashmap

Values

How do JS Engines represent values efficiently?


union {
    int64_t asInt64;
    double asDouble;
    struct {
        union {
            int32_t   asInt32;
            JSString* str;
            JSObject* obj;
        } payload;
        int32_t tag;
    } asBits;
}

31 bit integers can be "Immediates" (wrapped in the JSValue * pointer)

Mutenroshi's Tips

Prefer 31 bit integers: less memory & improved perfomance

Arrays

How do JS Engines handle arrays efficiently?

<64K Arrays use contiguous storage (FAST)
>64K Arrays use hash table storage (SLOW)

Numerical Arrays use optimized buffers


var array = new Array(16);
a[0] = 11; //Allocation
a[1] = 33;
a[2] = 17;


a[3] = 3.1416; //Warning! Allocation and buffer change!


a[4] = true; //Warning! Allocation and buffer change!


[11, 33, 17, 3.1416, true]; //Single allocation

Mutenroshi's Tips

Use the same type for all array elements
Preallocate small arrays
Don't prealocate >64K arrays, grow as you go.

Optimized compiler

How does the Optimized compiler work?

Learns while the program runs

Inline caching: speed up runtime method bindings


function max(a, b) {
	return a > b ? a : b;
}

max(1, 2);
max(300, 100);
max(45, 30); //Optimized vtable (monomorphic)


max("a", "z") //Warning! Polymorphic vtable => slower

Optimized compiler

Inlining is the mother of all optimizations

Monomorphic functions are more easily inlined

Bailouts...

Functions with big text size
Functions with lots of variables and arguments
Functions with try{} catch{} blocks
Functions with for(var in) blocks

Mutenroshi's Tips

Always use the same types
Never use try{} catch{} blocks in perf. critical functions
Never use for(var in) blocks in perf. critical functions
Prefer smaller methods

Practical example

C++ vs JavaScript code sample


//matrix1.js
// (...)
function main() {
    var sum = 0;
    for (var i = 0; i < 10000; ++i) {
        var m = new Matrix(1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.10, 11.11, 12.12, 13.13, 14.14, 15.15, 16.16); 
        for (var j = 0; j < 10000; j++) {
            sum+=determinant(m);
        }
        
        var p1 = new Point(1.1, 2.2, 3.3);
        for (var j = 0; j < 10000; ++j) {
            m.mapPoint(p1);
        }
    }
}
main();

Practical example

C++


//matrix.cpp
//(...)
int main(int argc, const char * argv[]) {
    double sum = 0;
    for (int i = 0; i < 10000; ++i) {
        Matrix m(1.1, 2.2, 3.3, 4.4, 5.5, 6.6, 7.7, 8.8, 9.9, 10.10, 11.11, 12.12, 13.13, 14.14, 15.15, 16.16);
        for (int j = 0; j < 10000; ++j) {
            sum+=Matrix::determinant(m);
        }
        Point p1(1.1, 2.2, 3.3);
        for (int j = 0; j < 10000; j++) {
            m.mapPoint(p1);
        }
        sum+=p1.x;   
    }
    return 0;
}

Perfomance profiling

V8 JavaScript shell (d8) is a very useful tool


$> time d8 matrix1.js
real	0m42.106s


$> clang++ matrix.cpp
$> time ./a.out
real	0m6.323s

C++ is ~7 times faster than JS

Wait a moment...


$> clang++ matrix.cpp -O3 #Super Saiyan Level 3 flag
$> time ./a.out
real	0m0.110s

C++ is ~400 times faster than JS!

Perfomance battle: C++ vs JS

Let's Apply the lessons learned!

~200x slower?

~100x slower?

~10x slower?

~2x slower?

faster?

Check performance bailouts


function determinant() {
    //(...)
    return a1 * (b2 * c3  - b3 * c2); // (...)
    //test
    try{
    }
    catch(ex) {
    }
}

Remove all the bailouts and...


$> time d8 matrix2.js
real	0m15.628s

~150x

Optimized Array Storage


function Matrix(m11, m12, m13, m14, m21, m22, m23, /*(...)*/) {
    var m_matrix = [[],[],[],[]];
    m_matrix[0][0] = m11; 
    m_matrix[0][1] = m12; 
    m_matrix[0][2] = m13; 
    m_matrix[0][3] = m14;  //(...)
}


function Matrix(m11, m12, m13, m14, m21, m22, m23, /*(...)*/) {
    var m_matrix = new Array(16);
    m_matrix[0] = m11; 
    m_matrix[1] = m12; 
    m_matrix[2] = m13; 
    m_matrix[3] = m14;  //(...)
}


$> time d8 matrix2.js
real	0m13.967s

~140x

Check inlining


$> d8 matrix3.js --trace-inlining
Did not inline determinant3x3 called from determinant(target text too big)


function determinant3x3(a1, a2, a3, b1, b2, b3, c1, c2, c3) {
    //  Calculate the determinant of a 3x3 matrix
    // 
    //      | a1,  b1,  c1 |
    //      | a2,  b2,  c2 |
    //      | a3,  b3,  c3 |
    // (...)
}

Remove the comments and...


$> time d8 matrix4.js
real	0m4.491s

~50x

Check inlining


$> d8 matrix4.js --trace-inlining
Did not inline determinant called from main (target AST is too large)


function determinant(matrix) {
    var m = matrix.m_matrix;
    var a1 = m[0]; var b1 = m[1]; var c1 = m[2]; var d1 = m[3]; //(...)
    return a1 * determinant3x3(b2, b3, b4, c2, c3, c4, d2, d3, d4)
    - b1 * determinant3x3(a2, a3, a4, c2, c3, c4, d2, d3, d4)
    + c1 * determinant3x3(a2, a3, a4, b2, b3, b4, d2, d3, d4)
    - d1 * determinant3x3(a2, a3, a4, b2, b3, b4, c2, c3, c4);
}


return m[0] * determinant3x3(m[5], m[9], m[13], m[6], m[10], m[14], m[7], m[11], m[15])
- m[1] * determinant3x3(m[4], m[8], m[12], m[6], m[10], m[14], m[7], m[11], m[15])
+ m[2] * determinant3x3(m[4], m[8], m[12], m[5], m[9], m[13], m[7], m[11], m[15])
- m[3] * determinant3x3(m[4], m[8], m[12], m[5], m[9], m[13], m[6], m[10], m[14]);


$> time d8 matrix5.js
real	0m1.794s

~16x

Check inlining


$> d8 matrix5.js --trace-inlining | grep mapPoint
$>


Matrix.prototype = { 
    mapPoint: function(p) {
        var x = this.m_matrix[12] + p.x * this.m_matrix[0] + p.y * this.m_matrix[4] + p.z * this.m_matrix[8];
        var y = this.m_matrix[13] + p.x * this.m_matrix[1] + p.y * this.m_matrix[5] + p.z * this.m_matrix[9];
        //(...)		
    }
}


function mapPoint(m_matrix,p) {
    var x = m_matrix.a41 + p.x * m_matrix.a11 + p.y * m_matrix.a21 + p.z * m_matrix.a31;
    var y = m_matrix.a42 + p.x * m_matrix.a12 + p.y * m_matrix.a22 + p.z * m_matrix.a32;
    //(...)				
}


$> time d8 matrix6.js
real	0m0.698s

~6x

Canvas And WebGL Tips

Canvas Save() and Restore()


for (var i= 0; i < sprites.length; ++i) {
	ctx.save();
	sprites[i].render();
	ctx.restore();
}

Canvas 2D context is huge...

Transformation Matrix
Fill Styles
Stroke Styles
Current Path
Clipping


for (var i= 0; i < sprites.length; ++i) {
	ctx.translate(x,y); //transform
	sprites[i].render();
	ctx.translate(-x,-y); //inverse transform
}

Canvas Paths

Limited API: Transformations

Tessellation is slow


//Cache rendered path to a canvas
var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.bezierCurveTo(30,300,100,300,50,10);
ctx.fill();
ctx.stroke();

mainctx.drawImage(canvas, 0, 0);

Texture Packing

Always pack your textures

http://www.codeandweb.com/texturepacker

https://github.com/jorgebastida/glue

https://github.com/hyperandroid/Sprite-Packer

WebGL Text Rendering


var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 50;
var ctx = canvas.getContext("2d");
ctx.font = "30px Saiyan-Sans";
ctx.fillText("Hello world!",0,0);

var texture = gl.createTexture();
gl.bindTexture(texture);
gl.texImage2D(canvas);

Canvas Texture
Canvas Context
System Buffer
WebGL texture
Data copy

Better use sprited Fonts!
http://71squared.com/glyphdesigner

WebGL bufferSubData


//initialization
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

//render tick
gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);

Very Slow on mobile devices

Use vertexAttribPointer instead!


gl.bindBuffer(gl.ARRAY_BUFFER, 0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, vertices);

Caution with generalist Render Engines

Makes the development easier, but...

Too many state changes

We've suffered it with three.js

About us

Bilbao and San Francisco based company
Small but awesome development team
Strongly focused on HTML5 technologies

www.ludei.com

HTML5 has huge advantages...

...but it's horrible on mobile

Solution: create our own tech!

Goal: Feel native in every way possible

Accelerated canvas
WebGL support
High perfomance music

Native Features

Ad networks
In-App purchases
Facebook
Google Play
GameCenter
Twitter
GPS, vibration, camera...

Cloud system

You upload your HTML5 game.
We give you a bundle ready to deploy.

Android

iOS

Amazon Kindle

Firefox OS
Pokki
Chrome Store
Tizen

How does it work?

It's a home made browser
Home made Canvas, WebGL, Sound, etc... implementations
Goal: Be faster than mobile webviews

A big challenge... Are we crazy?

Yes, but we're from Bilbao...

... and we are Dragon Ball fans ;)

The first test


#include <JavaScriptCore/JavaScriptCore.h>

int main(int argc, const char * argv[])
{
    JSContextRef ctx = JSGlobalContextCreate(NULL);
    const char * js = "console.log('hello world!');";
    JSStringRef script = JSStringCreateWithUTF8CString(js);
    JSValueRef exception = NULL;
    JSValueRef result = JSEvaluateScript(ctx, script, NULL, NULL, 0, &exception);
    JSStringRelease(script);
    JSGlobalContextRelease(ctx);
    
    return 0;
}

Challenge: Multiple JavaScript Engine support


#include "v8.h"
using namespace v8;

int main(int argc, const char * argv[])
{
    Isolate* isolate = Isolate::GetCurrent();.
    HandleScope handle_scope(isolate);
    Handle<Context> context = Context::New(isolate);
    Persistent<Context> persistent_context(isolate, context);
    Context::Scope context_scope(context);
    Handle<String> source = String::New('console.log('Hello world!')');
    Handle<Script> script = Script::Compile(source);
    Handle<Value> result = script->Run();
    persistent_context.Dispose();
    
    return 0;
}

Solution?

C++ Magic to solve the puzzle


//magic typedefs
typedef v8::Persistent<v8::Context> * JSContextRef;
typedef v8::Handle<v8::Value> JSValueRef;
typedef v8::Handle<v8::Object> JSObjectRef;


//magic macros
#define JSEntryPoint v8::Isolate::Scope isolateScope(getSharedIsolate()); \
v8::Locker v8Lock(getSharedIsolate()); \
v8::HandleScope handle_scope(getSharedIsolate());
#define JSContextScope(ctx) v8::Context::Scope context_scope(v8::Handle<v8::Context>::New(getSharedIsolate(),*ctx));

A really challenging puzzle (ex. 1000 fake functions)

About me

Imanol Fernández

Today, we're going to talk about

The JavaScript nature

A modern JS engine uses two compilers

How does a JS Engine evaluate a variable?

How does a Browser evaluate a variable?

Mutenroshi's Tips

Hidden classes

Mutenroshi's Tips

Values

Mutenroshi's Tips

Arrays

Mutenroshi's Tips

Optimized compiler

Optimized compiler

Mutenroshi's Tips

Practical example

Practical example

Perfomance profiling

Perfomance battle: C++ vs JS

Check performance bailouts

Optimized Array Storage

Check inlining

Check inlining

Check inlining

Canvas And WebGL Tips

Canvas Save() and Restore()

Canvas Paths

Texture Packing

WebGL Text Rendering

WebGL bufferSubData

Caution with generalist Render Engines

Native Features

Cloud system

Thank you!

@MortimerGoro