Upload
-
View
274
Download
4
Embed Size (px)
DESCRIPTION
JS, performance, pics.io, binary, lightroom in browser
Citation preview
Кто это?
● 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