performance optimisation in javascript
DESCRIPTION
JS, performance, pics.io, binary, lightroom in browserTRANSCRIPT
![Page 1: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/1.jpg)
![Page 2: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/2.jpg)
Кто это?
● Gameloft● WebSpellChecker● DevPro● Pics.io
@blackrabbit99
![Page 3: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/3.jpg)
![Page 4: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/4.jpg)
![Page 5: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/5.jpg)
![Page 6: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/6.jpg)
![Page 7: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/7.jpg)
![Page 8: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/8.jpg)
![Page 9: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/9.jpg)
![Page 10: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/10.jpg)
![Page 11: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/11.jpg)
Причины падения браузеров
● Утечки памяти● Куча http запросов● Слабая конфигурация машины
![Page 12: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/12.jpg)
![Page 13: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/13.jpg)
UI
![Page 14: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/14.jpg)
Trottling
Выполнение метода не чаще одного раза в указанный период, даже если он будет вызван много раз в течение этого периода
![Page 15: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/15.jpg)
Debouncing
● Реальный вызов происходит только в случае, если с момента последней попытки прошло время, большее или равное задержке.
● Реальный вызов происходит сразу, а все остальные попытки вызова игнорируются, пока не пройдет время, большее или равное задержке, отсчитанной от времени последней попытки.
![Page 16: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/16.jpg)
Вычисления
![Page 17: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/17.jpg)
Memoization
![Page 18: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/18.jpg)
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 );
}}
}
![Page 19: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/19.jpg)
Memoization
function hugeCalc(a){ ... }
var memoHugeCalc = hugeCalc.memoize();
memoHugeCalc(1);memoHugeCalc(1); memoHugeCalc(2);
![Page 20: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/20.jpg)
Self-defining functions
var defineMeAgain = function () {console.log("First");defineMeAgain = function () {
console.log("Second");};
};
![Page 21: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/21.jpg)
Self-defining functions
var secondFun = defineMeAgain;secondFun(); // "Boo!"secondFun(); // "Boo!"defineMeAgain(); // Double boo!defineMeAgain(); // Double boo!
![Page 22: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/22.jpg)
Look up tables
![Page 23: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/23.jpg)
Целочисленные значения
ctx.drawImage(myImage, 0.3, 0.5)
![Page 24: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/24.jpg)
CSS3 transform
![Page 25: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/25.jpg)
Nearest-neighbour rendering
![Page 26: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/26.jpg)
Не создавайте мусор● Array.slice● Array.splice● Function.bind
![Page 27: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/27.jpg)
Микрооптимизация● 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)
![Page 28: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/28.jpg)
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);
![Page 29: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/29.jpg)
Object pool
![Page 30: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/30.jpg)
Object pool
![Page 31: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/31.jpg)
WebWorkers
![Page 32: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/32.jpg)
WebWorkers
● Web workers не могут доступиться к DOM элементам● Web workers ничего не знают о глабольном скоупе, скоуп у них свой● Web workers не знают о alert и confirm● Window, documents также недоступны
![Page 33: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/33.jpg)
WebWorkers
Могут запустить потоки паралельно!!!!
![Page 34: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/34.jpg)
![Page 35: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/35.jpg)
![Page 36: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/36.jpg)
![Page 37: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/37.jpg)
![Page 38: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/38.jpg)
![Page 39: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/39.jpg)
Web Workers
● Dedicated Web Worker● Shared Web Worker● Http transport● Error handling● Terminate
![Page 40: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/40.jpg)
Parallel.js
var dataToParalel = plugin.prepare(imageSlices.getSliceList(), data);
var p = new Parallel(dataToParalel);
p.map(cb).then(next);
![Page 41: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/41.jpg)
Еще проблем
![Page 42: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/42.jpg)
API для асинхронной работой с key-value базой данных
IndexedDB
![Page 43: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/43.jpg)
var transaction = db.transaction(["history"],IDBTransaction.READ_WRITE);
var put = transaction.objectStore("history").put(blob, "image");
IndexedDB
![Page 44: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/44.jpg)
SIMD дает возможность работать с векторами, а не с одиночными значениями
Simd
![Page 45: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/45.jpg)
● loat32x4 (C type: __m128): four 32 bit floating point numbers.● uint32x4 (C type: __m128i): four 32 bit unsigned integers.
Simd
![Page 46: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/46.jpg)
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
![Page 47: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/47.jpg)
float32x4.abs(v)float32x4.neg(v)float32x4.sqrt(v)float32x4.add(v, w)float32x4.mul(v, w)float32x4.equal(v, w)
Simd
![Page 48: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/48.jpg)
Движок River Trail даст толчек ParallelJS. ParallelArray позволят работать с данными паралельно
ParallelJS
![Page 49: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/49.jpg)
ParallelJS
● Array.prototype.mapPar()● Array.prototype.filterPar()● Array.prototype.reducePar()
![Page 50: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/50.jpg)
WebCL
WebCL — спецификация, которая описывает JavaScript-интерфейс к стандарту OpenCL (Open Computing Language), для организации кросc-платформенных паралельных вычислений с использованием CPU и GPU-видеокарт.
![Page 51: Performance optimisation in javascript](https://reader033.vdocuments.mx/reader033/viewer/2022052905/55853d30d8b42a58788b497c/html5/thumbnails/51.jpg)
Дякую
QA