Документ обсуждает различные аспекты оптимизации производительности в веб-разработке, включая методы устранения падений браузеров, такие как утечки памяти и плохая конфигурация. В материалы также входят подходы к дебаунсингу, мемоизации функций, использованию веб-воркеров и SIMD для параллельных вычислений. В заключение упоминаются альтернативные техники, такие как использование WeakMap и WebCL для кросс-платформенных вычислений.

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

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

24. CSS3 transform

25. Nearest-neighbour rendering

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

47. float32x4.abs(v)
float32x4.neg(v)
float32x4.sqrt(v)
float32x4.add(v, w)
float32x4.mul(v, w)
float32x4.equal(v, w)
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