Performance optimisation in javascript

Кто это?

● Gameloft● WebSpellChecker● DevPro● Pics.io

@blackrabbit99

Причины падения браузеров

● Утечки памяти● Куча http запросов● Слабая конфигурация машины

UI

Trottling

Выполнение метода не чаще одного раза в указанный период, даже если он будет вызван много раз в течение этого периода

Debouncing

● Реальный вызов происходит только в случае, если с момента последней попытки прошло время, большее или равное задержке.

● Реальный вызов происходит сразу, а все остальные попытки вызова игнорируются, пока не пройдет время, большее или равное задержке, отсчитанной от времени последней попытки.

Вычисления

Memoization

Memoization

Function.prototype.memoize = function(){var self = this, cache = {};

return function( arg ){if(arg in cache) {

console.log('Cache hit for '+arg);return cache[arg];

} else {console.log('Cache miss for '+arg);return cache[arg] = self( arg );

}}

}

Memoization

function hugeCalc(a){ ... }

var memoHugeCalc = hugeCalc.memoize();

memoHugeCalc(1);memoHugeCalc(1); memoHugeCalc(2);

Self-defining functions

var defineMeAgain = function () {console.log("First");defineMeAgain = function () {

console.log("Second");};

};

Self-defining functions

var secondFun = defineMeAgain;secondFun(); // "Boo!"secondFun(); // "Boo!"defineMeAgain(); // Double boo!defineMeAgain(); // Double boo!

Look up tables

Целочисленные значения

ctx.drawImage(myImage, 0.3, 0.5)

CSS3 transform

Nearest-neighbour rendering

Не создавайте мусор● Array.slice● Array.splice● Function.bind

Микрооптимизация● Use x | 0 instead of Math.floor● Clear arrays with .length = 0 to avoid creating a new Array● Use if .. else over switch● Use TypedArrays for floats or integers (e.g. vectors and matrices)

Weak mapsvar map = new WeakMap(), element = jsObject;

map.set(element, {imAssosiatedWith: 'element'});var value = map.get(element);console.log(value);

element = null;

value = map.get(element);console.log(value);

Object pool

Object pool

WebWorkers

WebWorkers

● Web workers не могут доступиться к DOM элементам● Web workers ничего не знают о глабольном скоупе, скоуп у них свой● Web workers не знают о alert и confirm● Window, documents также недоступны

WebWorkers

Могут запустить потоки паралельно!!!!

Web Workers

● Dedicated Web Worker● Shared Web Worker● Http transport● Error handling● Terminate

Parallel.js

var dataToParalel = plugin.prepare(imageSlices.getSliceList(), data);

var p = new Parallel(dataToParalel);

p.map(cb).then(next);

Еще проблем

API для асинхронной работой с key-value базой данных

IndexedDB

var transaction = db.transaction(["history"],IDBTransaction.READ_WRITE);

var put = transaction.objectStore("history").put(blob, "image");

IndexedDB

SIMD дает возможность работать с векторами, а не с одиночными значениями

Simd

● loat32x4 (C type: __m128): four 32 bit floating point numbers.● uint32x4 (C type: __m128i): four 32 bit unsigned integers.

Simd

var a = SIMD.float32x4(1.0, 2.0, 3.0, 4.0);var b = SIMD.float32x4(5.0, 6.0, 7.0, 8.0);var c = SIMD.float32x4.add(a,b);

Simd

float32x4.abs(v)float32x4.neg(v)float32x4.sqrt(v)float32x4.add(v, w)float32x4.mul(v, w)float32x4.equal(v, w)

Simd

Движок River Trail даст толчек ParallelJS. ParallelArray позволят работать с данными паралельно

ParallelJS

ParallelJS

● Array.prototype.mapPar()● Array.prototype.filterPar()● Array.prototype.reducePar()

WebCL

WebCL — спецификация, которая описывает JavaScript-интерфейс к стандарту OpenCL (Open Computing Language), для организации кросc-платформенных паралельных вычислений с использованием CPU и GPU-видеокарт.

Дякую

QA