Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Кошелёк или деньги
Игорь Алексеенко, училка из HTML Academy
🔪 🔪 🔪
вычислять или вспоминать
GPU CPU
Memoryleak
FPS
Cache
He...
Никто не любит тормоза

в интерфейсе 👿
Тормоза в интерфейсе
Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случ...
Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случ...
Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случ...
Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случ...
Тормоза в интерфейсе
• неприятные впечатления от сайта (в лучшем случае)
• ошибки при произведении операций (в худшем случ...
Что такое тормоза?
(по-английски lag — задержка) Непредзсказуемые
задержки в обратной связи в интерфейсе: рывки
и замирания
Динамическое взаимодействие с
пользователем дискретно
Дискретное взаимодействие
Дискретное взаимодействие
• анимация
Дискретное взаимодействие
• анимация
• прокрутка
Дискретное взаимодействие
• анимация
• прокрутка
• нажатия на кнопки
Дискретное взаимодействие
• анимация
• прокрутка
• нажатия на кнопки
• обработка асинхронных процедур
Откуда берутся тормоза?
Откуда берутся тормоза?
кадр
Откуда берутся тормоза?
кадр
Откуда берутся тормоза?
кадр
лаг
Откуда берутся тормоза?
кадр
Откуда берутся тормоза?
кадр
Откуда берутся тормоза?
кадр
фриз
Откуда берутся тормоза
вычисления процессора занимают больше одного
кадра отрисовки и пользователь это замечает
⚖Процессор Память
используется для хранения

вычисленных сложных значений
используется для мгновенных

вычислений
❤ 🤔
Память
Что хранится в памяти
Что хранится в памяти
• все конструкции языка

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

переменные, значения, функции
• данные программы

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

переменные, значения, функции
• данные программы

загруженная информация, с...
происходит слишком долгое чтение из памяти, гораздо
медленнее чем происходили бы расчеты
Почему тормозит память
Почему тормозит память
Почему тормозит память
• чтение из переполненной памяти (большие объемы данных)
Почему тормозит память
• чтение из переполненной памяти (большие объемы данных)
• сборка мусора (происходит в произвольные...
Почему тормозит память
• чтение из переполненной памяти (большие объемы данных)
• сборка мусора (происходит в произвольные...
Профилирование
Тестовый DOM на 10 000 элементов
function* getPageSwitcher() {
while (true) {
yield function* (pageSize) {
let i = pageSize;
while (i --) {
const el = docu...
Утечка памяти
const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
document.addEven...
const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
document.addEven...
Утечка памяти
Сборка мусора
const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
el.addEventListe...
const switchPage = () => {
container.innerHTML = '';
for (const el of pageSwitcher.next().value(10000)) {
el.addEventListe...
Сборка мусора
Сборка мусора 15 мсек (1 кадр 60 FPS)
—Брендан Айк, создатель JS в одном из недавних подкастов
…it is a garbage garbage-collected language. It has performance u...
тормоза, связанные с памятью могут происходить и при
записи в неё значений и при её автоматической очистке
Память ненадежна
Процессор
Как ускорить работу процессора
Как ускорить работу процессора
• записать результаты в память
Как ускорить работу процессора
• записать результаты в память
Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
• затротлить
Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
• затротлить
Как ускорить работу процессора
• записать результаты в память
• уменьшить объем вычислений
• затротлить
• воспользоваться ...
Уменьшение объема вычислений
Динамическая прокрутка
показывать пользователю
только те элементы,
которые находятся в его
поле зрения. Остальные
элементы...
Первая страница на 10 000 элементов
Первая страница на 68 элементов
Тротлинг
Тротлинг (пропуск кадров)
Тротлинг (пропуск кадров)
Тротлинг (пропуск кадров)
window.onscroll = (evt) => {
if (document.body.scrollTop + window.innerHeight ===
document.body.scrollHeight) {
switchPage...
let prevPosition = document.body.scrollTop;
let prevComparison = 0;
let evtCounter = 0;
window.onscroll = (evt) => {
const...
600px прокрутки — 10 событий
let prevComparison = Date.now();
const throttleInterval = 100;
window.onscroll = (evt) => {
const now = Date.now();
if (no...
Тротл: 1 проверка на 5—6 событий
Отдать на видеокарту
Браузерные игры делают на
канвасе, а не на SVG
Заполним шариками объём
canvas 300х150 ~100 мсек
SVG 300х150 ~100 мсек
canvas 1000х1000 ~180 мсек
SVG 1000х1000 ~200 мсек
canvas 2000х2000 ~300 мсек
SVG 2000х2000 ~1/2 сек
Вы можете заменить d3js 🤔
Что делать, если 

оптимизировать невозможно
Если оптимизировать невозможно
• использовать обратную связь (спиннеры, заблокированные
кнопки)
• использовать особенности...
Правильная обратная связь
Обратная связь курильщика
100
Обратная связь курильщика
100
Обратная связь курильщика
101
Обратная связь курильщика
GET http: //localhost/ 500 Internal Server Err…
101
Обратная связь курильщика
GET http: //localhost/ 500 Internal Server Err…
101
Some error happened
Обратная связь здорового человека
100
Обратная связь здорового человека
100
Обратная связь здорового человека
100
Обратная связь здорового человека
GET http: //localhost/ 500 Internal Server Err…
100
Обратная связь здорового человека
GET http: //localhost/ 500 Internal Server Err…
100
Обратная связь здорового человека
GET http: //localhost/ 500 Internal Server Err…
100Что-то пошло не так и ваш голос не за...
Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK
Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK — Клик!
Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK
Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK
— Клик!
Обратная связь курильщика: 2
Месть обратной связи
Очень остроумный коммент| OK
Обратная связь курильщика: 2
GET http: //localhost/ 204
Месть обратной связи
Очень остроумный коммент| OK
Очень остроумный...
Обратная связь курильщика: 2
GET http: //localhost/ 204
Месть обратной связи
GET http: //localhost/ 204
Очень остроумный к...
Обратная связь курильщика: 2
GET http: //localhost/ 204
Месть обратной связи
GET http: //localhost/ 204
Очень остроумный к...
Обратная связь здорового человека: 2
Новая надежда
Очень остроумный коммент| OK
Обратная связь здорового человека: 2
Новая надежда
Очень остроумный коммент| OKOK — Клик!
Обратная связь здорового человека: 2
Новая надежда
Очень остроумный коммент| OKOK
Обратная связь здорового человека: 2
GET http: //localhost/ 204
Новая надежда
Очень остроумный коммент| OK
Очень остроумны...
Обратная связь здорового человека: 2
GET http: //localhost/ 204
Новая надежда
Очень остроумный коммент| OK
Очень остроумны...
Обратная связь здорового человека: 2
GET http: //localhost/ 204
Новая надежда
Очень остроумный коммент| OK
Очень остроумны...
Скриншот
Mac OS во время загрузки
чтобы создать впечатление
мгновенной инициализации
ОС, Mac показывает
скриншот последнего
состоян...
Динамическая прокрутка
если элементы не успели
прорисоваться при быстрой
прокрутке, можно показать
их муляжи, которые при
...
Алгоритм оптимизации
Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурс...
Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурс...
Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурс...
Алгоритм оптимизации
1. Уменьшить нагрузку на процессор
1. использовать меньше памяти
2. использовать все возможные ресурс...
👏 Спасибо!
o0.github.io
латинская «о», ноль
Upcoming SlideShare
Loading in …5
×

«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Игорь, Академия HTML

163 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

«Кошелек или деньги: сложный выбор между памятью и процессором» Алексеенко Игорь, Академия HTML

  1. 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. 2. Никто не любит тормоза
 в интерфейсе 👿
  3. 3. Тормоза в интерфейсе
  4. 4. Тормоза в интерфейсе • неприятные впечатления от сайта (в лучшем случае)
  5. 5. Тормоза в интерфейсе • неприятные впечатления от сайта (в лучшем случае) • ошибки при произведении операций (в худшем случае)
  6. 6. Тормоза в интерфейсе • неприятные впечатления от сайта (в лучшем случае) • ошибки при произведении операций (в худшем случае) • повторная отправка данных
  7. 7. Тормоза в интерфейсе • неприятные впечатления от сайта (в лучшем случае) • ошибки при произведении операций (в худшем случае) • повторная отправка данных • неправильное прицеливание (в играх)
  8. 8. Тормоза в интерфейсе • неприятные впечатления от сайта (в лучшем случае) • ошибки при произведении операций (в худшем случае) • повторная отправка данных • неправильное прицеливание (в играх) • уход пользователей
  9. 9. Тормоза в интерфейсе • неприятные впечатления от сайта (в лучшем случае) • ошибки при произведении операций (в худшем случае) • повторная отправка данных • неправильное прицеливание (в играх) • уход пользователей • потеря денег
  10. 10. Что такое тормоза? (по-английски lag — задержка) Непредзсказуемые задержки в обратной связи в интерфейсе: рывки и замирания
  11. 11. Динамическое взаимодействие с пользователем дискретно
  12. 12. Дискретное взаимодействие
  13. 13. Дискретное взаимодействие • анимация
  14. 14. Дискретное взаимодействие • анимация • прокрутка
  15. 15. Дискретное взаимодействие • анимация • прокрутка • нажатия на кнопки
  16. 16. Дискретное взаимодействие • анимация • прокрутка • нажатия на кнопки • обработка асинхронных процедур
  17. 17. Откуда берутся тормоза?
  18. 18. Откуда берутся тормоза? кадр
  19. 19. Откуда берутся тормоза? кадр
  20. 20. Откуда берутся тормоза? кадр лаг
  21. 21. Откуда берутся тормоза? кадр
  22. 22. Откуда берутся тормоза? кадр
  23. 23. Откуда берутся тормоза? кадр фриз
  24. 24. Откуда берутся тормоза вычисления процессора занимают больше одного кадра отрисовки и пользователь это замечает
  25. 25. ⚖Процессор Память используется для хранения
 вычисленных сложных значений используется для мгновенных
 вычислений ❤ 🤔
  26. 26. Память
  27. 27. Что хранится в памяти
  28. 28. Что хранится в памяти • все конструкции языка
 переменные, значения, функции
  29. 29. Что хранится в памяти • все конструкции языка
 переменные, значения, функции • данные программы
 загруженная информация, созданные объекты
  30. 30. Что хранится в памяти • все конструкции языка
 переменные, значения, функции • данные программы
 загруженная информация, созданные объекты • DOM-дерево
 для каждого элемента на странице создается соответствующий JS-объект (даже для переносов и комментариев)
  31. 31. происходит слишком долгое чтение из памяти, гораздо медленнее чем происходили бы расчеты Почему тормозит память
  32. 32. Почему тормозит память
  33. 33. Почему тормозит память • чтение из переполненной памяти (большие объемы данных)
  34. 34. Почему тормозит память • чтение из переполненной памяти (большие объемы данных) • сборка мусора (происходит в произвольные моменты)
  35. 35. Почему тормозит память • чтение из переполненной памяти (большие объемы данных) • сборка мусора (происходит в произвольные моменты) • утечки
  36. 36. Профилирование
  37. 37. Тестовый DOM на 10 000 элементов
  38. 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. 39. Утечка памяти
  40. 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. 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. 42. Утечка памяти
  43. 43. Сборка мусора
  44. 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. 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. 46. Сборка мусора
  47. 47. Сборка мусора 15 мсек (1 кадр 60 FPS)
  48. 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. 49. тормоза, связанные с памятью могут происходить и при записи в неё значений и при её автоматической очистке Память ненадежна
  50. 50. Процессор
  51. 51. Как ускорить работу процессора
  52. 52. Как ускорить работу процессора • записать результаты в память
  53. 53. Как ускорить работу процессора • записать результаты в память
  54. 54. Как ускорить работу процессора • записать результаты в память • уменьшить объем вычислений
  55. 55. Как ускорить работу процессора • записать результаты в память • уменьшить объем вычислений • затротлить
  56. 56. Как ускорить работу процессора • записать результаты в память • уменьшить объем вычислений • затротлить
  57. 57. Как ускорить работу процессора • записать результаты в память • уменьшить объем вычислений • затротлить • воспользоваться другими инструментами расчета (отдать на видеокарту)
  58. 58. Уменьшение объема вычислений
  59. 59. Динамическая прокрутка показывать пользователю только те элементы, которые находятся в его поле зрения. Остальные элементы отрисовывать по мере необходимости
  60. 60. Первая страница на 10 000 элементов
  61. 61. Первая страница на 68 элементов
  62. 62. Тротлинг
  63. 63. Тротлинг (пропуск кадров)
  64. 64. Тротлинг (пропуск кадров)
  65. 65. Тротлинг (пропуск кадров)
  66. 66. window.onscroll = (evt) => { if (document.body.scrollTop + window.innerHeight === document.body.scrollHeight) { switchPage(); } };
  67. 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. 68. 600px прокрутки — 10 событий
  69. 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. 70. Тротл: 1 проверка на 5—6 событий
  71. 71. Отдать на видеокарту
  72. 72. Браузерные игры делают на канвасе, а не на SVG
  73. 73. Заполним шариками объём
  74. 74. canvas 300х150 ~100 мсек
  75. 75. SVG 300х150 ~100 мсек
  76. 76. canvas 1000х1000 ~180 мсек
  77. 77. SVG 1000х1000 ~200 мсек
  78. 78. canvas 2000х2000 ~300 мсек
  79. 79. SVG 2000х2000 ~1/2 сек
  80. 80. Вы можете заменить d3js 🤔
  81. 81. Что делать, если 
 оптимизировать невозможно
  82. 82. Если оптимизировать невозможно • использовать обратную связь (спиннеры, заблокированные кнопки) • использовать особенности восприятия (приветственный экран Apple — муляж, фотография последнего экрана)
  83. 83. Правильная обратная связь
  84. 84. Обратная связь курильщика 100
  85. 85. Обратная связь курильщика 100
  86. 86. Обратная связь курильщика 101
  87. 87. Обратная связь курильщика GET http: //localhost/ 500 Internal Server Err… 101
  88. 88. Обратная связь курильщика GET http: //localhost/ 500 Internal Server Err… 101 Some error happened
  89. 89. Обратная связь здорового человека 100
  90. 90. Обратная связь здорового человека 100
  91. 91. Обратная связь здорового человека 100
  92. 92. Обратная связь здорового человека GET http: //localhost/ 500 Internal Server Err… 100
  93. 93. Обратная связь здорового человека GET http: //localhost/ 500 Internal Server Err… 100
  94. 94. Обратная связь здорового человека GET http: //localhost/ 500 Internal Server Err… 100Что-то пошло не так и ваш голос не зачёлся
  95. 95. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK
  96. 96. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK — Клик!
  97. 97. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK
  98. 98. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK — Клик!
  99. 99. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK
  100. 100. Обратная связь курильщика: 2 GET http: //localhost/ 204 Месть обратной связи Очень остроумный коммент| OK Очень остроумный коммент
  101. 101. Обратная связь курильщика: 2 GET http: //localhost/ 204 Месть обратной связи GET http: //localhost/ 204 Очень остроумный коммент| OK Очень остроумный коммент Очень остроумный коммент
  102. 102. Обратная связь курильщика: 2 GET http: //localhost/ 204 Месть обратной связи GET http: //localhost/ 204 Очень остроумный коммент| OK Очень остроумный коммент Очень остроумный коммент 👎 👎
  103. 103. Обратная связь здорового человека: 2 Новая надежда Очень остроумный коммент| OK
  104. 104. Обратная связь здорового человека: 2 Новая надежда Очень остроумный коммент| OKOK — Клик!
  105. 105. Обратная связь здорового человека: 2 Новая надежда Очень остроумный коммент| OKOK
  106. 106. Обратная связь здорового человека: 2 GET http: //localhost/ 204 Новая надежда Очень остроумный коммент| OK Очень остроумный коммент
  107. 107. Обратная связь здорового человека: 2 GET http: //localhost/ 204 Новая надежда Очень остроумный коммент| OK Очень остроумный коммент 👍
  108. 108. Обратная связь здорового человека: 2 GET http: //localhost/ 204 Новая надежда Очень остроумный коммент| OK Очень остроумный коммент 👍 Очень остроумно!
  109. 109. Скриншот
  110. 110. Mac OS во время загрузки чтобы создать впечатление мгновенной инициализации ОС, Mac показывает скриншот последнего состояния страницы, а в фоне производит необходимые вычисления
  111. 111. Динамическая прокрутка если элементы не успели прорисоваться при быстрой прокрутке, можно показать их муляжи, которые при остановке скролла заменятся на настоящие
  112. 112. Алгоритм оптимизации
  113. 113. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор
  114. 114. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти
  115. 115. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. использовать все возможные ресурсы для расчётов
  116. 116. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. использовать все возможные ресурсы для расчётов 3. проверить частоту кадров, вероятно её можно снизить
  117. 117. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. использовать все возможные ресурсы для расчётов 3. проверить частоту кадров, вероятно её можно снизить 2. Добавить обратную связь в интерфейс
  118. 118. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. использовать все возможные ресурсы для расчётов 3. проверить частоту кадров, вероятно её можно снизить 2. Добавить обратную связь в интерфейс 3. Начать оптимизацию памяти 👋
  119. 119. 👏 Спасибо!
  120. 120. o0.github.io латинская «о», ноль

×