Выступление на конференции DUMP-2017

1. Кошелёк или деньги
Игорь Алексеенко, училка из HTML Academy
🔪 🔪 🔪
вычислять или вспоминать
GPU CPU
Memoryleak
FPS
Cache
Heap
Garbagecollecting
Treatortreat
Calculations
Allocation
ClosureRAM
DOM
CanvasLazyloading
Ondemand
Freeze
Feedback
Generatorfunction
yield
spinner
disabledcontrols
errors
handling
Throttle
debounce
reflow
recalculate
BOM

2. Никто не любит тормоза
в интерфейсе 👿

3. Тормоза в интерфейсе

4. Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)

5. Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случае)

6. Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случае)
• повторная отправка данных

7. Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случае)
• повторная отправка данных
• неправильное прицеливание (в играх)

8. Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случае)
• повторная отправка данных
• неправильное прицеливание (в играх)
• уход пользователей

9. Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случае)
• повторная отправка данных
• неправильное прицеливание (в играх)
• уход пользователей
• потеря денег

10. Что такое тормоза?
(по-английски lag — задержка) Непредзсказуемые
задержки в обратной связи в интерфейсе: рывки
и замирания

11. Динамическое взаимодействие с
пользователем дискретно

12. Дискретное взаимодействие

13. Дискретное взаимодействие
• анимация

14. Дискретное взаимодействие
• анимация
• прокрутка

15. Дискретное взаимодействие
• анимация
• прокрутка
• нажатия на кнопки

16. Дискретное взаимодействие
• анимация
• прокрутка
• нажатия на кнопки
• обработка асинхронных процедур

17. Откуда берутся тормоза?

18. Откуда берутся тормоза?
кадр

19. Откуда берутся тормоза?
кадр

20. Откуда берутся тормоза?
кадр
лаг

21. Откуда берутся тормоза?
кадр

22. Откуда берутся тормоза?
кадр

23. Откуда берутся тормоза?
кадр
фриз

24. Откуда берутся тормоза
вычисления процессора занимают больше одного
кадра отрисовки и пользователь это замечает

25. ⚖Процессор Память
используется для хранения
вычисленных сложных значений
используется для мгновенных
вычислений
❤ 🤔

26. Память

27. Что хранится в памяти

28. Что хранится в памяти
• все конструкции языка
переменные, значения, функции

29. Что хранится в памяти
• все конструкции языка
переменные, значения, функции
• данные программы
загруженная информация, созданные объекты

30. Что хранится в памяти
• все конструкции языка
переменные, значения, функции
• данные программы
загруженная информация, созданные объекты
• DOM-дерево
для каждого элемента на странице создается
соответствующий JS-объект (даже для переносов
и комментариев)

31. происходит слишком долгое чтение из памяти, гораздо
медленнее чем происходили бы расчеты
Почему тормозит память

32. Почему тормозит память

33. Почему тормозит память
• чтение из переполненной памяти (большие объемы данных)

34. Почему тормозит память
• чтение из переполненной памяти (большие объемы данных)
• сборка мусора (происходит в произвольные моменты)

35. Почему тормозит память
• чтение из переполненной памяти (большие объемы данных)
• сборка мусора (происходит в произвольные моменты)
• утечки

36. Профилирование

37. Тестовый DOM на 10 000 элементов

38. function* getPageSwitcher() {
while (true) {
yield function* (pageSize) {
let i = pageSize;
while (i --) {
const el = document.createElement('div');
el.textContent = Date.now();
el.style.backgroundColor = `rgb(${Math.floor(Math.random()
yield el;
}
}
}
}

39. Утечка памяти

40. const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
document.addEventListener('click', evt => {
evt.stopPropagation();
console.log(el, Math.random());
});
container.appendChild(el);
}
};
document.onclick = switchPage;

41. const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
document.addEventListener('click', evt => {
evt.stopPropagation();
console.log(el, Math.random());
});
container.appendChild(el);
}
};
document.onclick = switchPage;

42. Утечка памяти

43. Сборка мусора

44. const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
el.addEventListener('click', evt => {
evt.stopPropagation();
console.log(el, Math.random());
});
container.appendChild(el);
}
};
document.onclick = switchPage;

45. const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
el.addEventListener('click', evt => {
evt.stopPropagation();
console.log(el, Math.random());
});
container.appendChild(el);
}
};
document.onclick = switchPage;

46. Сборка мусора

47. Сборка мусора 15 мсек (1 кадр 60 FPS)

48. —Брендан Айк, создатель JS в одном из недавних подкастов
…it is a garbage garbage-collected language. It has performance uncertainty.
Performance unpredictability is one way to put it, where you may be giving
something at 60 frames a second for a game and suddenly, you run out of real-
^me because of a garbage collec^on that has to happen to reclaim memory
https://softwareengineeringdaily.com/2017/03/31/webassembly-with-brendan-eich/

49. тормоза, связанные с памятью могут происходить и при
записи в неё значений и при её автоматической очистке
Память ненадежна

50. Процессор

51. Как ускорить работу процессора

52. Как ускорить работу процессора
• записать результаты в память

53. Как ускорить работу процессора
• записать результаты в память

54. Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений

55. Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
• затротлить

56. Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
• затротлить

57. Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
• затротлить
• воспользоваться другими инструментами расчета (отдать
на видеокарту)

58. Уменьшение объема вычислений

59. Динамическая прокрутка
показывать пользователю
только те элементы,
которые находятся в его
поле зрения. Остальные
элементы отрисовывать
по мере необходимости

60. Первая страница на 10 000 элементов

61. Первая страница на 68 элементов

62. Тротлинг

63. Тротлинг (пропуск кадров)

64. Тротлинг (пропуск кадров)

65. Тротлинг (пропуск кадров)

66. window.onscroll = (evt) => {
if (document.body.scrollTop + window.innerHeight ===
document.body.scrollHeight) {
switchPage();
}
};

67. let prevPosition = document.body.scrollTop;
let prevComparison = 0;
let evtCounter = 0;
window.onscroll = (evt) => {
const now = Date.now();
console.log(`Time shift between scroll is ${now - prevComparison}
console.log(`Delta is ${document.body.scrollTop - prevPosition}.
console.log(`Events happen ${evtCounter ++}`);
console.log(`-------`);
prevPosition = document.body.scrollTop;
prevComparison = now;
};

68. 600px прокрутки — 10 событий

69. let prevComparison = Date.now();
const throttleInterval = 100;
window.onscroll = (evt) => {
const now = Date.now();
if (now - prevComparison >= throttleInterval) {
if (document.body.scrollTop + window.innerHeight ===
document.body.scrollHeight) {
switchPage();
}
prevComparison = now;
}
};

70. Тротл: 1 проверка на 5—6 событий

71. Отдать на видеокарту

72. Браузерные игры делают на
канвасе, а не на SVG

73. Заполним шариками объём

74. canvas 300х150 ~100 мсек

75. SVG 300х150 ~100 мсек

76. canvas 1000х1000 ~180 мсек

77. SVG 1000х1000 ~200 мсек

78. canvas 2000х2000 ~300 мсек

79. SVG 2000х2000 ~1/2 сек

80. Вы можете заменить d3js 🤔

81. Что делать, если
оптимизировать невозможно

82. Если оптимизировать невозможно
• использовать обратную связь (спиннеры, заблокированные
кнопки)
• использовать особенности восприятия (приветственный
экран Apple — муляж, фотография последнего экрана)

83. Правильная обратная связь

84. Обратная связь курильщика
100

85. Обратная связь курильщика
100

86. Обратная связь курильщика
101

87. Обратная связь курильщика
GET http: //localhost/ 500 Internal Server Err…
101

88. Обратная связь курильщика
GET http: //localhost/ 500 Internal Server Err…
101
Some error happened

89. Обратная связь здорового человека
100

90. Обратная связь здорового человека
100

91. Обратная связь здорового человека
100

92. Обратная связь здорового человека
GET http: //localhost/ 500 Internal Server Err…
100

93. Обратная связь здорового человека
GET http: //localhost/ 500 Internal Server Err…
100

94. Обратная связь здорового человека
GET http: //localhost/ 500 Internal Server Err…
100Что-то пошло не так и ваш голос не зачёлся

95. Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK

96. Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK — Клик!

97. Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK

98. Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK
— Клик!

99. Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK

100. Обратная связь курильщика: 2
GET http: //localhost/ 204
Месть обратной связи
Очень остроумный коммент| OK
Очень остроумный коммент

101. Обратная связь курильщика: 2
GET http: //localhost/ 204
Месть обратной связи
GET http: //localhost/ 204
Очень остроумный коммент| OK
Очень остроумный коммент
Очень остроумный коммент

102. Обратная связь курильщика: 2
GET http: //localhost/ 204
Месть обратной связи
GET http: //localhost/ 204
Очень остроумный коммент| OK
Очень остроумный коммент
Очень остроумный коммент 👎
👎

103. Обратная связь здорового человека: 2
Новая надежда
Очень остроумный коммент| OK

104. Обратная связь здорового человека: 2
Новая надежда
Очень остроумный коммент| OKOK — Клик!

105. Обратная связь здорового человека: 2
Новая надежда
Очень остроумный коммент| OKOK

106. Обратная связь здорового человека: 2
GET http: //localhost/ 204
Новая надежда
Очень остроумный коммент| OK
Очень остроумный коммент

107. Обратная связь здорового человека: 2
GET http: //localhost/ 204
Новая надежда
Очень остроумный коммент| OK
Очень остроумный коммент 👍

108. Обратная связь здорового человека: 2
GET http: //localhost/ 204
Новая надежда
Очень остроумный коммент| OK
Очень остроумный коммент 👍
Очень остроумно!

109. Скриншот

110. Mac OS во время загрузки
чтобы создать впечатление
мгновенной инициализации
ОС, Mac показывает
скриншот последнего
состояния страницы,
а в фоне производит
необходимые вычисления

111. Динамическая прокрутка
если элементы не успели
прорисоваться при быстрой
прокрутке, можно показать
их муляжи, которые при
остановке скролла
заменятся на настоящие

112. Алгоритм оптимизации

113. Алгоритм оптимизации
1. Уменьшить нагрузку на процессор

114. Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти

115. Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурсы для расчётов

116. Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурсы для расчётов
3. проверить частоту кадров, вероятно её можно
снизить

117. Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурсы для расчётов
3. проверить частоту кадров, вероятно её можно
снизить
2. Добавить обратную связь в интерфейс

118. Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурсы для расчётов
3. проверить частоту кадров, вероятно её можно
снизить
2. Добавить обратную связь в интерфейс
3. Начать оптимизацию памяти 👋

119. 👏 Спасибо!

120. o0.github.io
латинская «о», ноль