@g33konaut

What happens on the GPU doesn’t stay on the GPULife of a pixel

@g33konaut

Доброго ранку, Київ!Як поживаєте?

@g33konaut

ZURICH, SWITZERLAND - yeah!

@g33konaut

But before we look into browsers...

@g33konaut

Software development is hard...

@g33konaut

Things go wrong...

@g33konaut

...a lot...

@g33konaut

… seriously!

@g33konaut

Why do we put up with this?

@g33konaut

We do it for our users!

@g33konaut

And we’re not alone!

@g33konaut

… and we’ve got many, many tools!

@g33konaut

So much choice can be puzzling...

@g33konaut

… because we don’t wanna go wrong ...

@g33konaut

Here. It. Comes.

@g33konaut

It’s mostly choice & flavour

@g33konaut

Creating user value >

@g33konaut

Some are simple

@g33konaut

Some are complex

@g33konaut

Some require … effort ...

@g33konaut

It’s about people, learning & fun!

Please keep it like that.

@g33konaut

Anyway.

Let’s fight Jank!

@g33konaut

First things first: What the flip is a pixel?

RGB

@g33konaut

Make it sparkle!

Memory010101110010101010010010101010010010010101010010010011101010101010101011010110101110010011101010101111011

@g33konautSource: Google Developers, CC-BY 3.0

@g33konaut

Rendering flow

Image CC-BY 3.0 by Paul Lewis, Google Developers

@g33konaut

Rendering flow

Image CC-BY 3.0 by Paul Lewis, Google Developers

CPU GPU

@g33konaut

GPU, CPU, OMG, WTF?

CPU

● general purpose● multitasking is a must● data dependencies● assumption:

I/O slower than calculations

GPU

● specialised for graphics● no dependencies● highly parallel● assumption:

unidirectional data flow

@g33konaut

Why should we not use JS for drawing stuff?

1920 x 1080 pixels = 2’073’600 pixels

24bit color = 3 byte per pixel = 6’220’800 byte = ~5,3 MB

@g33konaut

Hey, main thread,

please draw 2 million pixels in 10ms, kthxbye.

@g33konaut

Hey, CPU, ...

@g33konaut

Hey, GPU, ...

@g33konaut

Don’t worry, Browsers are clever

@g33konaut

Efficient painting in browsers: Tiles

@g33konaut

Tiles: How?

● page is organised in layers● layers may be broken down into tiles● tiles are saved as bitmaps & uploaded into VRAM● tiles can very often be reused (minimise/maximise, scroll)

@g33konaut

Aaaand action!

@g33konaut

CSS Triggers: csstriggers.com

@g33konaut

Contain changes with layers JSbin

@g33konaut

Make everything a layer! Or… should we?

● layers require VRAM, which is often limited● tiny overhead at creation time: Upload into VRAM● things get very, very slow when you overflow VRAM● you have no idea how much VRAM there is...

@g33konaut

Canvas time!

● we are on a separate layer● we get direct pixel access● yet there’s performance considerations!

@g33konaut

Canvas tips

● don’t do a lot of text rendering● avoid scaling images in canvas● avoid a large amount of bit copies (i.e. sweeping fillRect)● minimise the amount of draw calls (i.e. combine paths)● try to change as few pixels as possible between frames

@g33konaut

Canvas examplerequestAnimationFrame(function draw()

{

x = (x+1) % 300;

ctx.fillStyle = '#000';

ctx.fillRect(0, 0, 300, 300)

ctx.fillStyle = '#f00';

ctx.fillRect(x, 50, 50, 50)

requestAnimationFrame(draw)

})

@g33konaut

Canvas examplerequestAnimationFrame(function draw()

{

x = (x+1) % 301;

ctx.fillStyle = '#000';

ctx.fillRect(x-1, 50, 1, 50)

ctx.fillStyle = '#f00';

ctx.fillRect(x, 50, 50, 50)

requestAnimationFrame(draw)

})

@g33konaut

Canvas performance vs. WebGL

Source: TizenCC-BY 3.0

@g33konaut

WebGL basically gives youparallel pixel access

@g33konaut

Plus: You can program the GPU

@g33konaut

WebGL pipeline (simplified)

@g33konaut

Shaders: Vertex Shader & Fragment Shader

● Vertex shaders○ IN: Vertex ○ OUT: transformed vertex○ can do things like projection, waves, fish eye lens, etc.

● Fragment shaders○ IN: screen position, material, light, normal, textures, …○ OUT: Colour, depth value○ can do things like reflection, shading, lens flares, HDR

@g33konaut

Summary● Browsers are clever ● Do as much on the GPU, not the CPU● Beware of Layout & Paint● Canvas = CPU-bound pixel access● WebGL = GPU-bound pixel access● Think of your users & colleagues● Don’t panic.

@g33konaut

Дякую!

Slides: bit.ly/fwd16-performance

Twitter: @g33konaut

Web: archilogic.com