Немного о том, как ускорить работу с SVG и перестать мучить свой браузер

1. PERFORMANCE
Андрей Козяков
В БОРЬБЕ ЗА
МИЛЛИСЕКУНДЫ

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

3. ЧТО ЛЮБИТ ДЕЛАТЬ ПРОГРАММИСТ?
Фискить баги?
3

4. ЧТО ЛЮБИТ ДЕЛАТЬ ПРОГРАММИСТ?
Писать код!!!
4
Много кода!!!
Ещё больше кода!!!

6. КОГДА МЫ ПИШЕМ
МНОГО КОДА?
6
НОВЫЙ ФУНКЦИОНАЛ

7. ФИЧИ
7

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

9. ОН НА SVG
9
ОСНОВНАЯ ЕГО ФИЧА - ОН
РАБОТАЕТ
ПРИМЕР

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

11. 11

12. ВСЕ ИДЕТ ХОРОШО…
12
И ТУТ ПОЯВЛЯЕТСЯ КУЧА
ДАННЫХ

13. И МЫ ТАКИЕ
13
ОТКРЫВАЕМ
CHROME

14. 14

15. 15

16. 16

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

18. ЭТО НОРМАЛЬНО
18
СНАЧАЛА ФИЧА ДОЛЖНА
ЗАРАБОТАТЬ
«ПЕРВЫЙ БЛИН»

19. ЗАТЕМ
19
ДОВОДИМ ЕЕ
ДО СОВЕРШЕНСТВА
«ВТОРОЙ БЛИН»

20. PERFORMANCE UPDATE
20

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

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. С ЧЕГО НУЖНО НАЧИНАТЬ?
29
КАК ФУНКЦИОНИРУЕТ
ГРАФИК

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

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

32. ГЛАВНАЯ ИДЕЯ
32
МЕНЬШЕ НОВЫХ
ЭЛЕМЕНТОВ - РАБОТАТЬ С
ТЕМ, ЧТО ЕСТЬ

33. РЕЗУЛЬТАТ: -200MS
33
ДААААА…

34. СОВРАЛ: -30MS
34

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

36. ЧТО ДЕЛАТЬ?
36
РАССМОТРИМ СОСТАВ
ГРАФИКА

37. ШТРИХОВКА
37

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

39. ЛИНИИ
39

40. КРУЖОЧКИ
40

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

42. ДУМАЙТЕ…
42
ТЕМ ВРЕМЕНЕМ

47. WHAT A F…?

51. ЗАЧЕМ ЭТО?
51
КОГДА МЫ ЗАСТАВЛЯЕМ
БРАУЗЕР
ПЕРЕРИСОВЫВАТЬСЯ И
ПЕРЕСЧИТЫВАТЬ
КООРДИНАТЫ?

52. 52
getBBox()
getBoundingClientRect()

53. ДЛЯ ЧЕГО ИСПОЛЬЗУЮТСЯ?
53
SVG <TEXT>
ELEMENT
ДРУГОЕ
ПОЗИЦИОНИРОВАНИЕ

54. ГРАФИК
54

55. 55
<TEXT>
<RECT>

56. PROFILING
56

57. PROFILING
57

58. LIGHT QUIZ
58
-288 MS
GOOD OR BAD?

59. LIGHT QUIZ
59

60. КАК ОБОЙТИ?
60
НЕ ИСПОЛЬЗОВАТЬ

61. 61
НЕ
ПЫТАЙТЕСЬ
ПОВТОРИТЬ
У СЕБЯ
НА
ПРОЕКТЕ!

62. 62
ПРОСТО СЛАЙД

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

64. ШТРИХОВКА
64

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

66. ЛИНИИ
66

67. КРУЖОЧКИ
67

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

69. ГРАФИК
69

70. КРУЖОЧЕЧКИ
70

71. ВОЗНИКЛА ИДЕЯ
71
МОЖЕТ ИХ БЫСТРЕЕ
УДАЛИТЬ И СТРОИТЬ
СНУЛЯ?

72. ЧТО ПОЛУЧИЛОСЬ
72
IE - BAD :(
OVER 100500 КРУЖОЧКОВ
УДАЛЯЛОСЬ
ОКОЛО 5 СЕКУНД
CHROME - GOOD!

73. ИДЕЯ НАПРАШИВАЕТСЯ
73
НЕ РИСОВАТЬ КРУЖОЧКИ

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

75. 75

76. РАБОТАЕТ, НО…
76
БЕЗ КРУЖОЧКОВ ВСЕ
ЭТО
КАК ДЕТСКАЯ ГОРКА
НЕ КРУТО!

77. КАКИЕ ЕСТЬ ИДЕИ?
77
РИСОВАТЬ КРУЖОЧКИ
В СОСТАВЕ ЛИНИИ

78. ПОЧЕМУ ПЛОХ DRAG?
78
СЛИШКОМ ТЯЖЕЛАЯ
ЛИНИЯ

80. ИДЕЯ БЫСТРОФИКСА
80
РАЗБИЕНИЕ ЛИНИИ
НА КУСКИ
(МИФИЧЕСКИЕ 60 ТОЧЕК)

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

82. ВСЕ ЕЩЕ НЕ ЛЕТАЕТ
82
МИНИМИЗИРУЕМ

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

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

85. РАБОТА С МАССИВАМИ
85
var a = [ […], […], […], …];
[ {…}, {…}, {…}, …]
{x: 150, y: 200 …}
54

86. РАБОТА С МАССИВАМИ
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. 87
ВЫДЕЛЕНИЕ
ПОДМАСИВА
РАБОТА С МАССИВАМИ

88. РАБОТА С МАССИВАМИ
88
var a = [ […], […], […], …];
[ {…}, {…}, {…}, …]
{x: 150, y: 200 …}
54
var subA = a[i];
var item = subA[j];

92. 92
НАХОЖДЕНИЕ
MAX / MIN
РАБОТА С МАССИВАМИ

93. 93~30% БЫСТРЕЕ
РАБОТА С МАССИВАМИ

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

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

96. 96

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

98. LIGHT QUIZ
98
688 MS => 63MS
GOOD OR BAD?

99. LIGHT QUIZ
99
688 MS => 63MS
GOOD OR BAD?

100. 100
БЕЗ ОПТИМИЗАЦИИ НИКУДА
НО ПЕРЕУСЕРДСТВОВАТЬ НЕ СТОИТ

101. 101
QUESTIONS?
/kosiakoff
@kosiak_man