Слайды с конференции Devconf 2014. Рассказывается, как производительность влияет на конверсию, приводится 8 тонкостей языка, которые нужно знать, чтобы писать самый быстрый код из возможного.

1. РАЗГОНЯЕМ JS
Антон Плешивцев
aviasales.ru

2. МЕТАПОИСК

3. МЕТАПОИСК

4. МЕТАПОИСК

5. МЕТАПОИСК

6. МЕТАПОИСК

7. ОКНО ДЖОХАРИ
Известное
продавцу
Неизвестное
продавцу
Известное
клиенту
Открытое Слепое пятно
Неизвестное
клиенту
Скрытое Неизвестное

8. ПРОФИЛИРОВАНИЕ
• Метод пристального взгляда
• Ручное
• Инструментальное

9. СТАТИСТИЧЕСКОЕ

10. СОБЫТИЙНОЕ

11. РУЧНОЕ
t = +new Date();
code_to_measure();
time = +new Date() - t;

12. РУЧНОЕ, НО УДОБНОЕ
function profile(func){
!
var wrapper = function(){
var start = +new Date();
var result = func.apply(null, arguments);
console.log(func.name, +new Date() - start, "ms");
return result;
};
!
return wrapper;
}

13. РУЧНОЕ, НО УДОБНОЕ
code_to_measure = profile(code_to_measure);
!
code_to_measure();
> code_to_measure 112ms

18. КОНВЕРСИЯ
Январь Февраль Март Апрель Май

19. TIP #1
вызов функций

20. !
var start = +new Date();
var result = func.apply(null, arguments);
console.log(func.name, +new Date() - start, "ms");

21. switch (args.length) {
case 0: while (++i < l)
(ev = events[i]).callback.call(ev.ctx); return;
case 1: while (++i < l)
(ev = events[i]).callback.call(ev.ctx, a1); return;
case 2: while (++i < l)
(ev = events[i]).callback.call(ev.ctx, a1, a2); return;
case 3: while (++i < l)
(ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
default: while (++i < l)
(ev = events[i]).callback.apply(ev.ctx, args); return;
}

22. APPLY & CALL
0
12500000
25000000
37500000
50000000
Apply Call
(количество операций в секунду, больше - лучше)

23. APPLY & CALL & DIRECT
0
17500000
35000000
52500000
70000000
Apply Call Direct
(количество операций в секунду, больше - лучше)

24. TIP #2
быстрые таймауты

25. setTimeout(function test(){
!
…
!
}, 0)

26. function setZeroTimeout(fn) {
timeouts.push(fn);
window.postMessage("zero-timeout-message", "*");
}
!
window.addEventListener("message", function
handleMessage(event) {
if (event.source == window && event.data ==
messageName) {
//zero timeout
}
} , true)
http://dbaron.org/log/20100309-faster-timeouts

27. TIP #3
почему тормозит Underscore

28. _.map = _.collect = function(obj, iterator, context) {
var results = [];
!
if (obj == null) return results;
!
if (nativeMap && obj.map === nativeMap) return
obj.map(iterator, context);
!
each(obj, function(value, index, list) {
results.push(iterator.call(context, value, index,
list));
!
});
return results;
};

29. map = function(obj, iterator, context) {
if (nativeMap) {
map = function(obj, iterator, context){
return obj.map(iterator);
}
} else {
map = function(obj, iterator, context){
var results = [];
each(obj, function(value, index, list) {
results.push(iterator.call(context, value,
index, list));
});
return results;
}
}
return map(obj, iterator, context);
};

30. 0
3,75
7,5
11,25
15
_.map map
(время работы в среднем, меньше - лучше)

31. 0
4
8
12
16
_.map map lodash.map
(время работы в среднем, меньше - лучше)

32. TIP #4
самый быстрый цикл

33. CLASSIC FOR
for (var i = 0; i < arr.length; ++i) {
arr[i];
};

34. CLASSIC FOR WITH LENGTH
CACHE
for (var i = 0, len = arr.length; i < len; ++i) {
arr[i];
};

35. REVERSE WHILE
var i = arr.length;
while (i--) {
arr[i];
};

36. WHILE IMITATING FOR
var i = 0, len = arr.length;
while (i < len) {
arr[i];
i++;
};

37. 0
775
1550
2325
3100
classic for for with cache reverse while while imitating for
Firefox
(количество операций в секунду, больше - лучше)

38. 160
167,5
175
182,5
190
classic for for with cache reverse while while imitating for
Chrome

39. 0
800
1600
2400
3200
classic for for with cache reverse while while imitating for
Firefox Chrome

40. ПОБЕДИТЕЛЬ
var i = 0, len = arr.length;
while (i < len) {
arr[i];
i++;
};

41. TIP #5
быстрый доступ к ОП

42. function(){
document.getElementById('sidebar');
document.getElementById('collections');
document.getElementById('logo');
}

43. function(){
var d = document;
d.getElementById('sidebar');
d.getElementById('collections');
d.getElementById('logo');
}

44. 0
350
700
1050
1400
До После
(время на цикле 1М, меньше - лучше)

46. TIP #6
работа с DOM

47. JQUERY STRING
iframe = $("<iframe src='javascript:false'
name='theiframe'>");

48. JQUERY CHAIN
iframe = $(‘<iframe>’).attr({
name: 'theiframe',
src: ‘javascript:false'
})

49. NATIVE JS
iframe = document.createElement('iframe');
iframe.name = 'theiframe';
iframe.src = 'javascript:false';

50. FUNCTION
iframe = createElement('iframe', {
name: 'theiframe',
src: ‘javascript:false'
});

51. 0
125000
250000
375000
500000
jQuery string jQuery chain Native js Function
(количество операций в секунду, больше - лучше)

52. TIP #7
самый быстрый фреймворк

53. 0
750
1500
2250
3000
React Angular Mithril vuejs

54. TIP #8
self vs bind

55. var self = this;
check(function(){
self.ok();
})

56. check(function(){
this.ok();
}).bind(this);

57. 0
7500000
15000000
22500000
30000000
Bind self
(количество операций в секунду, больше - лучше)

58. ПРОФИЛИРУЙТЕ

59. ЗАМЕРЯЙТЕ

60. ИЗУЧАЙТЕ

61. ABOUT
АНТОН ПЛЕШИВЦЕВ
!
twitter.com/allaud
github.com/allaud
https://www.facebook.com/ant.pl.3
!
!
!
!
!
!
aviasales.ru