PERFORMANCE

Андрей Козяков

В БОРЬБЕ ЗА МИЛЛИСЕКУНДЫ

С ЧЕГО БЫ НАЧАТЬ?

2

ЧТО ЛЮБИТ ДЕЛАТЬ ПРОГРАММИСТ?

Фискить баги?

3

ЧТО ЛЮБИТ ДЕЛАТЬ ПРОГРАММИСТ?

Писать код!!!

4

Много кода!!!Ещё больше кода!!!

КОГДА МЫ ПИШЕМ МНОГО

КОДА?

6

НОВЫЙ ФУНКЦИОНАЛ

ФИЧИ

7

У НАС ЕСТЬ ГРАФИК

8

ОН НА SVG

9

ОСНОВНАЯ ЕГО ФИЧА - ОН РАБОТАЕТ

ПРИМЕР

НЕ НУЖНО ЗАБЫВАТЬ ПРО IE

10

11

ВСЕ ИДЕТ ХОРОШО…

12

И ТУТ ПОЯВЛЯЕТСЯ КУЧА ДАННЫХ

И МЫ ТАКИЕ

13

ОТКРЫВАЕМ CHROME

14

15

16

17

ВСПОМНИЛ ПРО IE

ЭТО НОРМАЛЬНО

18

СНАЧАЛА ФИЧА ДОЛЖНА ЗАРАБОТАТЬ

«ПЕРВЫЙ БЛИН»

ЗАТЕМ

19

ДОВОДИМ ЕЕ ДО СОВЕРШЕНСТВА

«ВТОРОЙ БЛИН»

PERFORMANCE UPDATE

20

С ЧЕГО НУЖНО НАЧИНАТЬ?

21

22

23

24

25

26

27

28

С ЧЕГО НУЖНО НАЧИНАТЬ?

29

КАК ФУНКЦИОНИРУЕТ ГРАФИК

ЧТО РАБОТАЕТ МЕДЛЕННЕЕ ВСЕГО?

30

РАБОТА С ДЕРЕВОМ

31

ГЛАВНАЯ ИДЕЯ

32

МЕНЬШЕ НОВЫХ ЭЛЕМЕНТОВ - РАБОТАТЬ С

ТЕМ, ЧТО ЕСТЬ

РЕЗУЛЬТАТ:  -200MS

33

ДААААА…

СОВРАЛ: -30MS

34

35

ВСПОМНИЛ ПРО IE

ЧТО ДЕЛАТЬ?

36

РАССМОТРИМ СОСТАВ ГРАФИКА

ШТРИХОВКА

37

ВРЕМЕННАЯ ШКАЛА

38

ЛИНИИ

39

КРУЖОЧКИ

40

ЧТО САМОЕ «ТЯЖЕЛОЕ»?

41

ДУМАЙТЕ…

42

ТЕМ ВРЕМЕНЕМ

WHAT A F…?

ЗАЧЕМ ЭТО?

51

КОГДА МЫ ЗАСТАВЛЯЕМ БРАУЗЕР

ПЕРЕРИСОВЫВАТЬСЯ И ПЕРЕСЧИТЫВАТЬ КООРДИНАТЫ?

52

getBBox()

getBoundingClientRect()

ДЛЯ ЧЕГО ИСПОЛЬЗУЮТСЯ?

53

SVG <TEXT> ELEMENT

ДРУГОЕ ПОЗИЦИОНИРОВАНИЕ

ГРАФИК

54

55

<TEXT>

<RECT>

PROFILING

56

PROFILING

57

LIGHT QUIZ

58

-288 MS GOOD OR BAD?

LIGHT QUIZ

59

КАК ОБОЙТИ?

60

НЕ ИСПОЛЬЗОВАТЬ

61

НЕ ПЫТАЙТЕСЬ ПОВТОРИТЬ

У СЕБЯНА

ПРОЕКТЕ!

62

ПРОСТО СЛАЙД

ЧТО САМОЕ «ТЯЖЕЛОЕ»?

63

ШТРИХОВКА

64

ВРЕМЕННАЯ ШКАЛА

65

ЛИНИИ

66

КРУЖОЧКИ

67

ЧТО САМОЕ «ТЯЖЕЛОЕ»?

68

ГРАФИК

69

КРУЖОЧЕЧКИ

70

ВОЗНИКЛА ИДЕЯ

71

МОЖЕТ ИХ БЫСТРЕЕ УДАЛИТЬ И СТРОИТЬ

СНУЛЯ?

ЧТО ПОЛУЧИЛОСЬ

72

IE - BAD :(

OVER 100500 КРУЖОЧКОВ УДАЛЯЛОСЬ

ОКОЛО 5 СЕКУНД

CHROME - GOOD!

ИДЕЯ НАПРАШИВАЕТСЯ

73

НЕ РИСОВАТЬ КРУЖОЧКИ

ОТКРЫТИЕ!

74

IE БЫСТРЕЕ CHROME(В КОНТЕКСТЕ ОТРИСОВКИ)

75

РАБОТАЕТ, НО…

76

БЕЗ КРУЖОЧКОВ ВСЕ ЭТО

КАК ДЕТСКАЯ ГОРКА

НЕ КРУТО!

КАКИЕ ЕСТЬ ИДЕИ?

77

РИСОВАТЬ КРУЖОЧКИВ СОСТАВЕ ЛИНИИ

ПОЧЕМУ ПЛОХ DRAG?

78

СЛИШКОМ ТЯЖЕЛАЯ ЛИНИЯ

ИДЕЯ БЫСТРОФИКСА

80

РАЗБИЕНИЕ ЛИНИИ НА КУСКИ

(МИФИЧЕСКИЕ 60 ТОЧЕК)

81

ВСЕ ЕЩЕ НЕ ВЕРИШЬ, ЧТО IE БЫСТРЕЕ?

СМОТРИ!

ВСЕ ЕЩЕ НЕ ЛЕТАЕТ

82

МИНИМИЗИРУЕМ

КАК БЫСТРЕЕ ОБЪЕДИНЯТЬ СТРОКИ?

83

FOR(… IN …)[].MAP()[].SORT()[].FILTER()

РАБОТА С МАССИВАМИ

85

var a = [ […], […], […], …];

[ {…}, {…}, {…}, …]

{x: 150, y: 200 …}54

РАБОТА С МАССИВАМИ

86

var a = [ […], […], […], …];

[ {…}, {…}, {…}, …]

{x: 150, y: 200 …}54

var subA = a[i];

var item = subA[j];

if (a[i][j].x && a[i][j].y) {…}

87

ВЫДЕЛЕНИЕ ПОДМАСИВА

РАБОТА С МАССИВАМИ

РАБОТА С МАССИВАМИ

88

var a = [ […], […], […], …];

[ {…}, {…}, {…}, …]

{x: 150, y: 200 …}54

var subA = a[i];

var item = subA[j];

92

НАХОЖДЕНИЕ MAX / MIN

РАБОТА С МАССИВАМИ

93~30% БЫСТРЕЕ

РАБОТА С МАССИВАМИ

И НА ПОСЛЕДОК

94

УДАЛЯЕМ КРУЖОЧКИЕСЛИ ТОЧЕК БОЛЕЕ 4000

КАКОЙ ЖЕ РЕЗУЛЬТАТ?

95

96

КАКОЙ ЖЕ РЕЗУЛЬТАТ?

97

LIGHT QUIZ

98

688 MS => 63MSGOOD OR BAD?

LIGHT QUIZ

99

688 MS => 63MSGOOD OR BAD?

100

БЕЗ ОПТИМИЗАЦИИ НИКУДА

НО ПЕРЕУСЕРДСТВОВАТЬ НЕ СТОИТ

101

QUESTIONS?

/kosiakoff

@kosiak_man