Performance optimisation in javascript

Кто это?
● Gameloft
● WebSpellChecker
● DevPro
● Pics.io
@blackrabbit99

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

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

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

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!

Целочисленные значения
ctx.drawImage(myImage, 0.3, 0.5)

Не создавайте мусор
● 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 maps
var 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);

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-видеокарт.

Performance optimisation in javascript

Related slideshows

More Related Content

Performance optimisation in javascript