Performance optimisation in javascript
2 likes608 views
Документ обсуждает различные аспекты оптимизации производительности в веб-разработке, включая методы устранения падений браузеров, такие как утечки памяти и плохая конфигурация. В материалы также входят подходы к дебаунсингу, мемоизации функций, использованию веб-воркеров и SIMD для параллельных вычислений. В заключение упоминаются альтернативные техники, такие как использование WeakMap и WebCL для кросс-платформенных вычислений.
![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 );
}
}
}](https://image.slidesharecdn.com/lvivjs-140818053221-phpapp02/85/Performance-optimisation-in-javascript-18-320.jpg)
![var transaction = db.transaction(["history"],IDBTransaction.READ_WRITE);
var put = transaction.objectStore("history").put(blob, "image");
IndexedDB](https://image.slidesharecdn.com/lvivjs-140818053221-phpapp02/85/Performance-optimisation-in-javascript-43-320.jpg)
Performance optimisation in javascript
- 2. Кто это? ● Gameloft ● WebSpellChecker ● DevPro ● Pics.io @blackrabbit99
- 11. Причины падения браузеров ● Утечки памяти ● Куча http запросов ● Слабая конфигурация машины
- 13. UI
- 14. Trottling Выполнение метода не чаще одного раза в указанный период, даже если он будет вызван много раз в течение этого периода
- 15. Debouncing ● Реальный вызов происходит только в случае, если с момента последней попытки прошло время, большее или равное задержке. ● Реальный вызов происходит сразу, а все остальные попытки вызова игнорируются, пока не пройдет время, большее или равное задержке, отсчитанной от времени последней попытки.
- 16. Вычисления
- 17. Memoization
- 18. 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 ); } } }
- 19. Memoization function hugeCalc(a){ ... } var memoHugeCalc = hugeCalc.memoize(); memoHugeCalc(1); memoHugeCalc(1); memoHugeCalc(2);
- 20. Self-defining functions var defineMeAgain = function () { console.log("First"); defineMeAgain = function () { console.log("Second"); }; };
- 21. Self-defining functions var secondFun = defineMeAgain; secondFun(); // "Boo!" secondFun(); // "Boo!" defineMeAgain(); // Double boo! defineMeAgain(); // Double boo!
- 22. Look up tables
- 24. CSS3 transform
- 26. Не создавайте мусор ● Array.slice ● Array.splice ● Function.bind
- 27. Микрооптимизация ● 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)
- 28. 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);
- 29. Object pool
- 30. Object pool
- 31. WebWorkers
- 32. WebWorkers ● Web workers не могут доступиться к DOM элементам ● Web workers ничего не знают о глабольном скоупе, скоуп у них свой ● Web workers не знают о alert и confirm ● Window, documents также недоступны
- 33. WebWorkers Могут запустить потоки паралельно!!!!
- 39. Web Workers ● Dedicated Web Worker ● Shared Web Worker ● Http transport ● Error handling ● Terminate
- 40. Parallel.js var dataToParalel = plugin.prepare(imageSlices.getSliceList(), data); var p = new Parallel(dataToParalel); p.map(cb).then(next);
- 41. Еще проблем
- 42. API для асинхронной работой с key-value базой данных IndexedDB
- 43. var transaction = db.transaction(["history"],IDBTransaction.READ_WRITE); var put = transaction.objectStore("history").put(blob, "image"); IndexedDB
- 44. SIMD дает возможность работать с векторами, а не с одиночными значениями Simd
- 45. ● loat32x4 (C type: __m128): four 32 bit floating point numbers. ● uint32x4 (C type: __m128i): four 32 bit unsigned integers. Simd
- 46. 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
- 48. Движок River Trail даст толчек ParallelJS. ParallelArray позволят работать с данными паралельно ParallelJS
- 49. ParallelJS ● Array.prototype.mapPar() ● Array.prototype.filterPar() ● Array.prototype.reducePar()
- 50. WebCL WebCL — спецификация, которая описывает JavaScript-интерфейс к стандарту OpenCL (Open Computing Language), для организации кросc-платформенных паралельных вычислений с использованием CPU и GPU-видеокарт.
- 51. Дякую QA