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.
GPU CPU
Memoryleak
FPS
Cache
Heap
Garbagecollecting
Treatortreat
Calculations
Allocation
ClosureRAM
DOM
CanvasLazyloading
...
Никто не любит тормоза

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

и при взаимодействии видны рывки
Откуда берутся тормоза?
кадр
Откуда берутся тормоза?
кадр
зависание (фриз, freeze)
вычисления не прекращаются, взаимодействие
невозможно
⚖
Процессор Память
используется для хранения

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

вычислений
Память
Запомнить результат вычислений
Запомнить результат вычислений
• объект Math помнит популярные результаты вычислений
(Пи, E, логарифм 10, корень из 2)
Запомнить результат вычислений
• объект Math помнит популярные результаты вычислений
(Пи, E, логарифм 10, корень из 2)
• т...
Запомнить результат вычислений
• объект Math помнит популярные результаты вычислений
(Пи, E, логарифм 10, корень из 2)
• т...
Запомнить результат вычислений
кадр
Запомнить результат вычислений
кадр
получение уже известного

результата почти 

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

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

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

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

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

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

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

загруженная информация, с...
в неожиданные моменты времени происходит сборка
мусора или происходит утечка памяти, которая засоряет
память лишними объек...
Почему тормозит память
Почему тормозит память
• сборка мусора
Почему тормозит память
• сборка мусора
• утечки
Профилирование
Профилирование
• таймлайн:
Профилирование
• таймлайн:
• частота кадров
Профилирование
• таймлайн:
• частота кадров
• загруженность процессора
Профилирование
• таймлайн:
• частота кадров
• загруженность процессора
• скриншот
Профилирование
• таймлайн:
• частота кадров
• загруженность процессора
• скриншот
• память
Профилирование
• таймлайн:
• частота кадров
• загруженность процессора
• скриншот
• память
• детальная статистика
Тестовый DOM
Тестовый DOM
• пять страниц по 5000 котиков
Тестовый DOM
• пять страниц по 5000 котиков
• страницы переключаются
с помощью пагинатора
Тестовый DOM
let i = pageSize;
while (i--) {
const el = templateElement.cloneNod
el.querySelector(`.pic-thumb`).src
el.que...
Тестовый DOM
• элементы создаются из
шаблона let i = pageSize;
while (i--) {
const el = templateElement.cloneNod
el.queryS...
Тестовый DOM
• элементы создаются из
шаблона
• заполняются случайными
данными (нет кеширования)
let i = pageSize;
while (i...
Тестовый DOM
• элементы создаются из
шаблона
• заполняются случайными
данными (нет кеширования)
• добавляются в один фрагм...
Тестовый DOM
страницы переключаются
простой очисткой контейнера
container.innerHTML = '';
Сборка мусора
(Garbage Colleccon, GC) процесс удаления неиспользуемых
объектов из памяти. В JS начинается автоматически,
когда движок по...
Сборка мусора
Сборка мусора
• когда память, выделенная под
вкладку заканчивается,
включается механизм GC
Сборка мусора
• когда память, выделенная под
вкладку заканчивается,
включается механизм GC
• процесс сборки мусора
автомат...
Сборка мусора
• когда память, выделенная под
вкладку заканчивается,
включается механизм GC
• процесс сборки мусора
автомат...
Сборка мусора
• когда память, выделенная под
вкладку заканчивается,
включается механизм GC
• процесс сборки мусора
автомат...
Сборка мусора
• когда память, выделенная под
вкладку заканчивается,
включается механизм GC
• процесс сборки мусора
автомат...
Утечка памяти
ситуация, когда при сборке мусора, некоторые
неиспользуемые объекты остаются в памяти, потому
что сборщик мусора считает, ...
Утечка памяти
const switchPage = (pageSwitcher, pag
container.innerHTML = '';
for (const el of pageSwitcher.next(
document...
Утечка памяти
const switchPage = (pageSwitcher, pag
container.innerHTML = '';
for (const el of pageSwitcher.next(
document...
Утечка памяти
const switchPage = (pageSwitcher, pag
container.innerHTML = '';
for (const el of pageSwitcher.next(
document...
Утечка памяти
• после удаления ноды, GC не
может определить, что
обработчик на документе не
используется и не удаляет его
...
—Брендан Айк, создатель JS в одном из недавних подкастов
…it is a garbage garbage-collected language. It has performance u...
тормоза, связанные с памятью могут происходить и при
записи в неё значений и при её автоматической очистке.
Прогнозировать...
Процессор
Как ускорить работу процессора
Как ускорить работу процессора
• уменьшить объем вычислений
Как ускорить работу процессора
• уменьшить объем вычислений
• затротлить
Как ускорить работу процессора
• уменьшить объем вычислений
• затротлить
Как ускорить работу процессора
• уменьшить объем вычислений
• затротлить
• воспользоваться другими инструментами расчёта
Уменьшение объема вычислений
Динамическая прокрутка
показывать пользователю
только те элементы, которые
находятся в его поле зрения.
Остальные элементы...
Первая страница на 5000 элементов
Первая страница на 5000 элементов
• полная отрисовка заняла
четыре секунды
Первая страница на 5000 элементов
• полная отрисовка заняла
четыре секунды
• пользователь увидел хоть
что-то через две с
п...
Первая страница на 5000 элементов
• полная отрисовка заняла
четыре секунды
• пользователь увидел хоть
что-то через две с
п...
Первая страница на 100 элементов
Первая страница на 100 элементов
• полная отрисовка
произошла меньше
чем за полсекунды
Первая страница на 100 элементов
• полная отрисовка
произошла меньше
чем за полсекунды
• пользователь увидел
результаты ср...
Тротлинг
Тротлинг (пропуск кадров)
Тротлинг (пропуск кадров)
Тротлинг (пропуск кадров)
фактическая 

частота
Тротлинг (пропуск кадров)
фактическая 

частота
достаточная
частота
Тротлинг (пропуск кадров)
фактическая 

частота
достаточная
частота
Проверка положения скролла
по каждому событию скролла
проверяется, не находится ли
пользователь в низу страницы (с
небольш...
Прокрутка 100 фоток
Прокрутка 100 фоток
• событие скролла каждые
4 пикселя при высоте
страницы в 1000
Прокрутка 100 фоток
• событие скролла каждые
4 пикселя при высоте
страницы в 1000
• от верха до низа — почти
500 проверок ...
Оптимизированная проверка
let prevComparison = performance.now
window.onscroll = () => {
const now = performance.now();
if...
Оптимизированная проверка
• событие скролла происходит
с прежней частотой
let prevComparison = performance.now
window.onsc...
Оптимизированная проверка
• событие скролла происходит
с прежней частотой
• дополнительная нагрузка на
скролл в виде сложн...
Прокрутка 100 фоток — тротл 100 мсек
Прокрутка 100 фоток — тротл 100 мсек
• событие скролла каждые
20-30 пикселей
при высоте страницы
в 1000
Прокрутка 100 фоток — тротл 100 мсек
• событие скролла каждые
20-30 пикселей
при высоте страницы
в 1000
• 100 проверок где...
Отдать вычисления
Отдать вычисления
Отдать вычисления
• на видеокарту (canvas)
Отдать вычисления
• на видеокарту (canvas)
• на сервер
Отдать вычисления
• на видеокарту (canvas)
• на сервер
• в другой поток (ServiceWorker)
Отдать на видеокарту
почему браузерные игры делают не на SVG
SVG canvas
SVG
• все элементы хранятся в
памяти, даже незначительные
canvas
SVG
• все элементы хранятся в
памяти, даже незначительные
• все отрисовывается сразу и все
объекты превращаются в набор
пи...
SVG
• все элементы хранятся в
памяти, даже незначительные
• все отрисовывается сразу и все
объекты превращаются в набор
пи...
SVG
• все элементы хранятся в
памяти, даже незначительные
• с каждым элементом можно
взаимодействовать: изменять
после отр...
SVG
• все элементы хранятся в
памяти, даже незначительные
• с каждым элементом можно
взаимодействовать: изменять
после отр...
SVG
• все элементы хранятся в
памяти, даже незначительные
• с каждым элементом можно
взаимодействовать: изменять
после отр...
SVG
• все элементы хранятся в
памяти, даже незначительные
• с каждым элементом можно
взаимодействовать: изменять
после отр...
Покрутим земной шар
Покрутим земной шар
• 800×600
Покрутим земной шар
• 800×600
• все страны описаны
через один контур (path)
Покрутим земной шар
• 800×600
• все страны описаны
через один контур (path)
• частоту кадров
определяет сам браузер
(reque...
Покрутим земной шар
• 800×600
• все страны описаны
через один контур (path)
• частоту кадров
определяет сам браузер
(reque...
canvas
для отрисовки
используется
только GPU
canvas
для отрисовки
используется
только GPU
в среднем время
выполнения 6—6,5 сек 

(360 frames / ~6 sec = ~60 FPS)
SVG
сначала параметры нод
рассчитываются процессором
как узлы DOM-дерева
SVG
сначала параметры нод
рассчитываются процессором
как узлы DOM-дерева
в среднем время
выполнения 8 сек 

(360 frames / ...
SVG
сначала параметры нод
рассчитываются процессором
как узлы DOM-дерева
в среднем время
выполнения 8 сек 

(360 frames / ...
To obviate flicker from white
light projected on a bright
surface requires about
48 obscuracons per second
—
Эдисон,

котор...
Странный тест на утечку
Странный тест на утечку
при вызове каждого
последующего кадра
«забыта» очистка
предыдущего: следующее
состояние рисуется п...
canvas
результаты не
изменились — 6 сек,
~60 FPS
SVG
SVG
• полная длительность анимации
составила 24 минуты
SVG
• полная длительность анимации
составила 24 минуты
• DevTools хрома вылетели
с ошибкой, потому что не
смогли разобрать...
SVG
• полная длительность анимации
составила 24 минуты
• DevTools хрома вылетели
с ошибкой, потому что не
смогли разобрать...
Отдать вычисления на сервер
Задача: тепловая карта
Задача: тепловая карта
• шаг обновления
данных — 1px
Задача: тепловая карта
• шаг обновления
данных — 1px
• полная перерисовка после
каждого изменения
состояния карты (заново
...
Задача: тепловая карта
• шаг обновления
данных — 1px
• полная перерисовка после
каждого изменения
состояния карты (заново
...
Решение на canvas
Решение на canvas
• с нуля написанный код —
нет готовых хороших
библиотек для создания
тепловых карт
Решение на canvas
• с нуля написанный код —
нет готовых хороших
библиотек для создания
тепловых карт
• большие вычисления
...
Запрос изображений с сервера
Запрос изображений с сервера
• изображения сгенерированы
с помощью библиотеки
визуализации для Python
Запрос изображений с сервера
• изображения сгенерированы
с помощью библиотеки
визуализации для Python
• изображения хранят...
Запрос изображений с сервера
• изображения сгенерированы
с помощью библиотеки
визуализации для Python
• изображения хранят...
Отдать в параллельный поток
Отдать в параллельный поток
редактор ace.js проводит
проверку синтаксиса
загруженного файла. Чтобы
не тормозить основные
в...
Отдать вычисления
Отдать вычисления
• измените рендерер d3.js на канвас
Отдать вычисления
• измените рендерер d3.js на канвас
• много запросов — не всегда плохо, иногда они работают
быстрее, чем...
Отдать вычисления
• измените рендерер d3.js на канвас
• много запросов — не всегда плохо, иногда они работают
быстрее, чем...
Отдать вычисления
• измените рендерер d3.js на канвас
• много запросов — не всегда плохо, иногда они работают
быстрее, чем...
Что делать, если 

оптимизировать невозможно
Если оптимизировать невозможно
Если оптимизировать невозможно
• использовать обратную связь (спиннеры, заблокированные
кнопки)
Если оптимизировать невозможно
• использовать обратную связь (спиннеры, заблокированные
кнопки)
• использовать особенности...
Правильная обратная связь
Обратная связь курильщика
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
латинская «о», ноль
Оптимизация производительности фронтенда / Игорь Алексеенко (HTML Academy)
Upcoming SlideShare
Loading in …5
×

Оптимизация производительности фронтенда / Игорь Алексеенко (HTML Academy)

289 views

Published on

РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 6 июня, 14:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2524.html

В этом докладе я покажу на примерах, в каких случаях нужно делать ставку на кэширование, а в каких можно довериться процессору, и как это может помочь оптимизировать производительность сложного фронтенд-приложения.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Оптимизация производительности фронтенда / Игорь Алексеенко (HTML Academy)

  1. 1. GPU CPU Memoryleak FPS Cache Heap Garbagecollecting Treatortreat Calculations Allocation ClosureRAM DOM CanvasLazyloading Ondemand Freeze Feedback Generatorfunctions yield spinner disabledcontrols errors handling Throttle debounce reflow recalculate BOM RAM Generatorfunctions DOM FPSspinner reflow yield ocation Feed BOM arbagecollecting errors FPS handling Lazyloa collecting atorfunctions Closure Memoryleak DOM yield Heap ding reflow Если ваш сайт тормозит:
 1. забудьте про память (до поры)
 2. разгрузите процессор
 3. прикиньтесь, что так и должно быть Игорь Алексеенко, училка в Академии HTML
  2. 2. Никто не любит тормоза
 в интерфейсе 👿
  3. 3. Хороший сценарий
  4. 4. Хороший сценарий • неприятные впечатления от сайта:
  5. 5. Хороший сценарий • неприятные впечатления от сайта: • неправильное прицеливание в играх
  6. 6. Хороший сценарий • неприятные впечатления от сайта: • неправильное прицеливание в играх • заметные задержки в анимации
  7. 7. Плохой сценарий
  8. 8. Плохой сценарий • ошибки при важных операциях
  9. 9. Плохой сценарий • ошибки при важных операциях • повторная отправка данных (например, при оплате)
  10. 10. Плохой сценарий • ошибки при важных операциях • повторная отправка данных (например, при оплате) • неотправка данных
  11. 11. Плохой сценарий • ошибки при важных операциях • повторная отправка данных (например, при оплате) • неотправка данных • уход пользователей
  12. 12. Плохой сценарий • ошибки при важных операциях • повторная отправка данных (например, при оплате) • неотправка данных • уход пользователей • потеря денег компанией
  13. 13. Плохой сценарий • ошибки при важных операциях • повторная отправка данных (например, при оплате) • неотправка данных • уход пользователей • потеря денег компанией • увольнение
  14. 14. Что такое тормоза? (по-английски lag — задержка) Непредсказуемые задержки в обратной связи в интерфейсе: рывки и замирания
  15. 15. Взаимодействие с пользователем дискретно
  16. 16. Дискретное взаимодействие
  17. 17. Дискретное взаимодействие • анимация
  18. 18. Дискретное взаимодействие • анимация • прокрутка
  19. 19. Дискретное взаимодействие • анимация • прокрутка • взаимодействие с элементами страницы
  20. 20. Дискретное взаимодействие • анимация • прокрутка • взаимодействие с элементами страницы • нажатия на кнопки
  21. 21. Дискретное взаимодействие • анимация • прокрутка • взаимодействие с элементами страницы • нажатия на кнопки • ввод текста
  22. 22. Дискретное взаимодействие • анимация • прокрутка • взаимодействие с элементами страницы • нажатия на кнопки • ввод текста • перетаскивание
  23. 23. Event L p∞
  24. 24. Event L p∞
  25. 25. Event L p бесконечный цикл, который после выполнения всех инструкций продолжает работать и ждет поступления новых асинхронных команд ∞
  26. 26. Event L p бесконечный цикл, который после выполнения всех инструкций продолжает работать и ждет поступления новых асинхронных команд EventLoop синхронизируется со скроллом, перерисовкой DOM, всеми асинхронными операциями и т. д. ∞
  27. 27. Event L p бесконечный цикл, который после выполнения всех инструкций продолжает работать и ждет поступления новых асинхронных команд EventLoop синхронизируется со скроллом, перерисовкой DOM, всеми асинхронными операциями и т. д. Чтобы запустить код в начале кадра нужно передать его как коллбэк в функцию requestAnimationFrame ∞
  28. 28. Event L p бесконечный цикл, который после выполнения всех инструкций продолжает работать и ждет поступления новых асинхронных команд EventLoop синхронизируется со скроллом, перерисовкой DOM, всеми асинхронными операциями и т. д. Чтобы запустить код в начале кадра нужно передать его как коллбэк в функцию requestAnimationFrame кадр ~16 мсек на Mac OS (60 FPS)
 но это неточно ∞
  29. 29. Откуда берутся тормоза вычисления процессора занимают больше одного кадра отрисовки и пользователь это замечает
  30. 30. Откуда берутся тормоза? кадр
  31. 31. Откуда берутся тормоза? кадр задержка (лаг, lag) вычисления занимают больше одного кадра
 и при взаимодействии видны рывки
  32. 32. Откуда берутся тормоза? кадр
  33. 33. Откуда берутся тормоза? кадр зависание (фриз, freeze) вычисления не прекращаются, взаимодействие невозможно
  34. 34. ⚖ Процессор Память используется для хранения
 вычисленных значений используется для мгновенных
 вычислений
  35. 35. Память
  36. 36. Запомнить результат вычислений
  37. 37. Запомнить результат вычислений • объект Math помнит популярные результаты вычислений (Пи, E, логарифм 10, корень из 2)
  38. 38. Запомнить результат вычислений • объект Math помнит популярные результаты вычислений (Пи, E, логарифм 10, корень из 2) • таблицы синусов и косинусов, рассчитанные на этапе компиляции в старых играх
  39. 39. Запомнить результат вычислений • объект Math помнит популярные результаты вычислений (Пи, E, логарифм 10, корень из 2) • таблицы синусов и косинусов, рассчитанные на этапе компиляции в старых играх • заранее просчитанные анимации
  40. 40. Запомнить результат вычислений кадр
  41. 41. Запомнить результат вычислений кадр получение уже известного
 результата почти 
 не занимает времени
  42. 42. Что хранится в памяти
  43. 43. Что хранится в памяти • все конструкции языка
 переменные, значения, функции
  44. 44. Что хранится в памяти • все конструкции языка
 переменные, значения, функции • данные программы
 загруженная информация, созданные объекты
  45. 45. Что хранится в памяти • все конструкции языка
 переменные, значения, функции • данные программы
 загруженная информация, созданные объекты • DOM-дерево
 для каждого элемента на странице создается соответствующий JS-объект (даже для переносов и комментариев)
  46. 46. Что хранится в памяти • все конструкции языка
 переменные, значения, функции • данные программы
 загруженная информация, созданные объекты • DOM-дерево
 для каждого элемента на странице создается соответствующий JS-объект (даже для переносов и комментариев) • …
  47. 47. в неожиданные моменты времени происходит сборка мусора или происходит утечка памяти, которая засоряет память лишними объектами Почему тормозит память
  48. 48. Почему тормозит память
  49. 49. Почему тормозит память • сборка мусора
  50. 50. Почему тормозит память • сборка мусора • утечки
  51. 51. Профилирование
  52. 52. Профилирование • таймлайн:
  53. 53. Профилирование • таймлайн: • частота кадров
  54. 54. Профилирование • таймлайн: • частота кадров • загруженность процессора
  55. 55. Профилирование • таймлайн: • частота кадров • загруженность процессора • скриншот
  56. 56. Профилирование • таймлайн: • частота кадров • загруженность процессора • скриншот • память
  57. 57. Профилирование • таймлайн: • частота кадров • загруженность процессора • скриншот • память • детальная статистика
  58. 58. Тестовый DOM
  59. 59. Тестовый DOM • пять страниц по 5000 котиков
  60. 60. Тестовый DOM • пять страниц по 5000 котиков • страницы переключаются с помощью пагинатора
  61. 61. Тестовый DOM let i = pageSize; while (i--) { const el = templateElement.cloneNod el.querySelector(`.pic-thumb`).src el.querySelector(`.pic-like-counter Math.random() * 90) + 10; yield el; }
  62. 62. Тестовый DOM • элементы создаются из шаблона let i = pageSize; while (i--) { const el = templateElement.cloneNod el.querySelector(`.pic-thumb`).src el.querySelector(`.pic-like-counter Math.random() * 90) + 10; yield el; }
  63. 63. Тестовый DOM • элементы создаются из шаблона • заполняются случайными данными (нет кеширования) let i = pageSize; while (i--) { const el = templateElement.cloneNod el.querySelector(`.pic-thumb`).src el.querySelector(`.pic-like-counter Math.random() * 90) + 10; yield el; }
  64. 64. Тестовый DOM • элементы создаются из шаблона • заполняются случайными данными (нет кеширования) • добавляются в один фрагмент (DocumentFragment) for (const el of pageSwitcher.next(). fragment.appendChild(el); }
  65. 65. Тестовый DOM страницы переключаются простой очисткой контейнера container.innerHTML = '';
  66. 66. Сборка мусора
  67. 67. (Garbage Colleccon, GC) процесс удаления неиспользуемых объектов из памяти. В JS начинается автоматически, когда движок понимает, что свободная память закончилась и нужно освободить место Сборка мусора —
  68. 68. Сборка мусора
  69. 69. Сборка мусора • когда память, выделенная под вкладку заканчивается, включается механизм GC
  70. 70. Сборка мусора • когда память, выделенная под вкладку заканчивается, включается механизм GC • процесс сборки мусора автоматический: предсказать его начало невозможно
  71. 71. Сборка мусора • когда память, выделенная под вкладку заканчивается, включается механизм GC • процесс сборки мусора автоматический: предсказать его начало невозможно • в некоторых случаях GC может работать очень медленно
  72. 72. Сборка мусора • когда память, выделенная под вкладку заканчивается, включается механизм GC • процесс сборки мусора автоматический: предсказать его начало невозможно • в некоторых случаях GC может работать очень медленно
  73. 73. Сборка мусора • когда память, выделенная под вкладку заканчивается, включается механизм GC • процесс сборки мусора автоматический: предсказать его начало невозможно • в некоторых случаях GC может работать очень медленно Суммарно сборка мусора заняла ~10 кадров при частоте 60 FPS
  74. 74. Утечка памяти
  75. 75. ситуация, когда при сборке мусора, некоторые неиспользуемые объекты остаются в памяти, потому что сборщик мусора считает, что они могут использоваться Утечка памяти —
  76. 76. Утечка памяти const switchPage = (pageSwitcher, pag container.innerHTML = ''; for (const el of pageSwitcher.next( document.addEventListener('keydow evt.stopPropagation(); console.log(el, Math.random()); }); container.appendChild(el); } };
  77. 77. Утечка памяти const switchPage = (pageSwitcher, pag container.innerHTML = ''; for (const el of pageSwitcher.next( document.addEventListener('keydow evt.stopPropagation(); console.log(el, Math.random()); }); container.appendChild(el); } }; • после удаления ноды, GC не может определить, что обработчик на документе не используется и не удаляет его
  78. 78. Утечка памяти const switchPage = (pageSwitcher, pag container.innerHTML = ''; for (const el of pageSwitcher.next( document.addEventListener('keydow evt.stopPropagation(); console.log(el, Math.random()); }); container.appendChild(el); } }; • после удаления ноды, GC не может определить, что обработчик на документе не используется и не удаляет его • обработчик через замыкание использует DOM-ноду, поэтому она тоже не удаляется из памяти
  79. 79. Утечка памяти • после удаления ноды, GC не может определить, что обработчик на документе не используется и не удаляет его • обработчик через замыкание использует DOM-ноду, поэтому она тоже не удаляется из памяти
  80. 80. —Брендан Айк, создатель 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-cme because of a garbage colleccon that has to happen to reclaim memory https://softwareengineeringdaily.com/2017/03/31/webassembly-with-brendan-eich/
  81. 81. тормоза, связанные с памятью могут происходить и при записи в неё значений и при её автоматической очистке. Прогнозировать момент возникновения тормозов очень сложно Память ненадежна
  82. 82. Процессор
  83. 83. Как ускорить работу процессора
  84. 84. Как ускорить работу процессора • уменьшить объем вычислений
  85. 85. Как ускорить работу процессора • уменьшить объем вычислений • затротлить
  86. 86. Как ускорить работу процессора • уменьшить объем вычислений • затротлить
  87. 87. Как ускорить работу процессора • уменьшить объем вычислений • затротлить • воспользоваться другими инструментами расчёта
  88. 88. Уменьшение объема вычислений
  89. 89. Динамическая прокрутка показывать пользователю только те элементы, которые находятся в его поле зрения. Остальные элементы отрисовывать по мере необходимости
  90. 90. Первая страница на 5000 элементов
  91. 91. Первая страница на 5000 элементов • полная отрисовка заняла четыре секунды
  92. 92. Первая страница на 5000 элементов • полная отрисовка заняла четыре секунды • пользователь увидел хоть что-то через две с половиной секунды
  93. 93. Первая страница на 5000 элементов • полная отрисовка заняла четыре секунды • пользователь увидел хоть что-то через две с половиной секунды • пользователь увидел контент почти через три с половиной секунды
  94. 94. Первая страница на 100 элементов
  95. 95. Первая страница на 100 элементов • полная отрисовка произошла меньше чем за полсекунды
  96. 96. Первая страница на 100 элементов • полная отрисовка произошла меньше чем за полсекунды • пользователь увидел результаты сразу как только появился контент, не было дополнительной загрузки, это заняло четверть секнуды
  97. 97. Тротлинг
  98. 98. Тротлинг (пропуск кадров)
  99. 99. Тротлинг (пропуск кадров)
  100. 100. Тротлинг (пропуск кадров) фактическая 
 частота
  101. 101. Тротлинг (пропуск кадров) фактическая 
 частота достаточная частота
  102. 102. Тротлинг (пропуск кадров) фактическая 
 частота достаточная частота
  103. 103. Проверка положения скролла по каждому событию скролла проверяется, не находится ли пользователь в низу страницы (с небольшим запасом) window.onscroll = () => { if (document.body.scrollTop + wind document.body.scrollHeight - S switchPage(pageSwitcher, PAGE_SI } };
  104. 104. Прокрутка 100 фоток
  105. 105. Прокрутка 100 фоток • событие скролла каждые 4 пикселя при высоте страницы в 1000
  106. 106. Прокрутка 100 фоток • событие скролла каждые 4 пикселя при высоте страницы в 1000 • от верха до низа — почти 500 проверок где находится пользователь
  107. 107. Оптимизированная проверка let prevComparison = performance.now window.onscroll = () => { const now = performance.now(); if (now - prevComparison >= 100) { if (document.body.scrollTop + wi document.body.scrollHeight - switchPage(pageSwitcher, PAGE_ } prevComparison = now; } };
  108. 108. Оптимизированная проверка • событие скролла происходит с прежней частотой let prevComparison = performance.now window.onscroll = () => { const now = performance.now(); if (now - prevComparison >= 100) { if (document.body.scrollTop + wi document.body.scrollHeight - switchPage(pageSwitcher, PAGE_ } prevComparison = now; } };
  109. 109. Оптимизированная проверка • событие скролла происходит с прежней частотой • дополнительная нагрузка на скролл в виде сложных вычислений производится не чаще, чем раз в 100 мсек let prevComparison = performance.now window.onscroll = () => { const now = performance.now(); if (now - prevComparison >= 100) { if (document.body.scrollTop + wi document.body.scrollHeight - switchPage(pageSwitcher, PAGE_ } prevComparison = now; } };
  110. 110. Прокрутка 100 фоток — тротл 100 мсек
  111. 111. Прокрутка 100 фоток — тротл 100 мсек • событие скролла каждые 20-30 пикселей при высоте страницы в 1000
  112. 112. Прокрутка 100 фоток — тротл 100 мсек • событие скролла каждые 20-30 пикселей при высоте страницы в 1000 • 100 проверок где находится пользователь
  113. 113. Отдать вычисления
  114. 114. Отдать вычисления
  115. 115. Отдать вычисления • на видеокарту (canvas)
  116. 116. Отдать вычисления • на видеокарту (canvas) • на сервер
  117. 117. Отдать вычисления • на видеокарту (canvas) • на сервер • в другой поток (ServiceWorker)
  118. 118. Отдать на видеокарту почему браузерные игры делают не на SVG
  119. 119. SVG canvas
  120. 120. SVG • все элементы хранятся в памяти, даже незначительные canvas
  121. 121. SVG • все элементы хранятся в памяти, даже незначительные • все отрисовывается сразу и все объекты превращаются в набор пикселей (не используется память для долгосрочного хранения элементов) canvas
  122. 122. SVG • все элементы хранятся в памяти, даже незначительные • все отрисовывается сразу и все объекты превращаются в набор пикселей (не используется память для долгосрочного хранения элементов) • для хранения данных нужно использовать отдельные структуры, которые можно оптимизировать под задачу canvas
  123. 123. SVG • все элементы хранятся в памяти, даже незначительные • с каждым элементом можно взаимодействовать: изменять после отрисовки, анимировать, описывать пользовательское взаимодействие, обновлять по одиночке • все отрисовывается сразу и все объекты превращаются в набор пикселей (не используется память для долгосрочного хранения элементов) • для хранения данных нужно использовать отдельные структуры, которые можно оптимизировать под задачу canvas
  124. 124. SVG • все элементы хранятся в памяти, даже незначительные • с каждым элементом можно взаимодействовать: изменять после отрисовки, анимировать, описывать пользовательское взаимодействие, обновлять по одиночке • все отрисовывается сразу и все объекты превращаются в набор пикселей (не используется память для долгосрочного хранения элементов) • для хранения данных нужно использовать отдельные структуры, которые можно оптимизировать под задачу • низкоуровневое API: из коробки нет стилизации, взаимодействия с пользователем, анимации, работы с отдельными элементами canvas
  125. 125. SVG • все элементы хранятся в памяти, даже незначительные • с каждым элементом можно взаимодействовать: изменять после отрисовки, анимировать, описывать пользовательское взаимодействие, обновлять по одиночке • видеокарта используется не на полную: параметры элементы высчитываются на процессоре и только потом отрисовываются через видеокарту • все отрисовывается сразу и все объекты превращаются в набор пикселей (не используется память для долгосрочного хранения элементов) • для хранения данных нужно использовать отдельные структуры, которые можно оптимизировать под задачу • низкоуровневое API: из коробки нет стилизации, взаимодействия с пользователем, анимации, работы с отдельными элементами canvas
  126. 126. SVG • все элементы хранятся в памяти, даже незначительные • с каждым элементом можно взаимодействовать: изменять после отрисовки, анимировать, описывать пользовательское взаимодействие, обновлять по одиночке • видеокарта используется не на полную: параметры элементы высчитываются на процессоре и только потом отрисовываются через видеокарту • все отрисовывается сразу и все объекты превращаются в набор пикселей (не используется память для долгосрочного хранения элементов) • для хранения данных нужно использовать отдельные структуры, которые можно оптимизировать под задачу • низкоуровневое API: из коробки нет стилизации, взаимодействия с пользователем, анимации, работы с отдельными элементами • вся отрисовка происходит на видеокарте canvas
  127. 127. Покрутим земной шар
  128. 128. Покрутим земной шар • 800×600
  129. 129. Покрутим земной шар • 800×600 • все страны описаны через один контур (path)
  130. 130. Покрутим земной шар • 800×600 • все страны описаны через один контур (path) • частоту кадров определяет сам браузер (requestAnimaconFrame)
  131. 131. Покрутим земной шар • 800×600 • все страны описаны через один контур (path) • частоту кадров определяет сам браузер (requestAnimaconFrame) • один оборот на 360º по градусу за кадр
  132. 132. canvas для отрисовки используется только GPU
  133. 133. canvas для отрисовки используется только GPU в среднем время выполнения 6—6,5 сек 
 (360 frames / ~6 sec = ~60 FPS)
  134. 134. SVG сначала параметры нод рассчитываются процессором как узлы DOM-дерева
  135. 135. SVG сначала параметры нод рассчитываются процессором как узлы DOM-дерева в среднем время выполнения 8 сек 
 (360 frames / ~8 sec = ~45 FPS)
  136. 136. SVG сначала параметры нод рассчитываются процессором как узлы DOM-дерева в среднем время выполнения 8 сек 
 (360 frames / ~8 sec = ~45 FPS)
  137. 137. To obviate flicker from white light projected on a bright surface requires about 48 obscuracons per second — Эдисон,
 который с лампочкой 💡
  138. 138. Странный тест на утечку
  139. 139. Странный тест на утечку при вызове каждого последующего кадра «забыта» очистка предыдущего: следующее состояние рисуется поверх
  140. 140. canvas результаты не изменились — 6 сек, ~60 FPS
  141. 141. SVG
  142. 142. SVG • полная длительность анимации составила 24 минуты
  143. 143. SVG • полная длительность анимации составила 24 минуты • DevTools хрома вылетели с ошибкой, потому что не смогли разобрать лог профайлера
  144. 144. SVG • полная длительность анимации составила 24 минуты • DevTools хрома вылетели с ошибкой, потому что не смогли разобрать лог профайлера
  145. 145. Отдать вычисления на сервер
  146. 146. Задача: тепловая карта
  147. 147. Задача: тепловая карта • шаг обновления данных — 1px
  148. 148. Задача: тепловая карта • шаг обновления данных — 1px • полная перерисовка после каждого изменения состояния карты (заново создавать все canvas)
  149. 149. Задача: тепловая карта • шаг обновления данных — 1px • полная перерисовка после каждого изменения состояния карты (заново создавать все canvas) • отсутствие интерактивного взаимодействия: данные статичны
  150. 150. Решение на canvas
  151. 151. Решение на canvas • с нуля написанный код — нет готовых хороших библиотек для создания тепловых карт
  152. 152. Решение на canvas • с нуля написанный код — нет готовых хороших библиотек для создания тепловых карт • большие вычисления приводят к одинаковому результату — тепловая карта не меняется со временем
  153. 153. Запрос изображений с сервера
  154. 154. Запрос изображений с сервера • изображения сгенерированы с помощью библиотеки визуализации для Python
  155. 155. Запрос изображений с сервера • изображения сгенерированы с помощью библиотеки визуализации для Python • изображения хранятся на сервере и не создаются повторно для каждого использования
  156. 156. Запрос изображений с сервера • изображения сгенерированы с помощью библиотеки визуализации для Python • изображения хранятся на сервере и не создаются повторно для каждого использования • кеширование уже загруженных изображений в браузере
  157. 157. Отдать в параллельный поток
  158. 158. Отдать в параллельный поток редактор ace.js проводит проверку синтаксиса загруженного файла. Чтобы не тормозить основные вычисления (работа с редактором), проверка производится в параллельном потоке
  159. 159. Отдать вычисления
  160. 160. Отдать вычисления • измените рендерер d3.js на канвас
  161. 161. Отдать вычисления • измените рендерер d3.js на канвас • много запросов — не всегда плохо, иногда они работают быстрее, чем вычисления на клиенте
  162. 162. Отдать вычисления • измените рендерер d3.js на канвас • много запросов — не всегда плохо, иногда они работают быстрее, чем вычисления на клиенте • сложные оверлеи на картах Google лучше сделать один раз на сервере картинками
  163. 163. Отдать вычисления • измените рендерер d3.js на канвас • много запросов — не всегда плохо, иногда они работают быстрее, чем вычисления на клиенте • сложные оверлеи на картах Google лучше сделать один раз на сервере картинками • то, что можно посчитать параллельно, отдайте в Worker
  164. 164. Что делать, если 
 оптимизировать невозможно
  165. 165. Если оптимизировать невозможно
  166. 166. Если оптимизировать невозможно • использовать обратную связь (спиннеры, заблокированные кнопки)
  167. 167. Если оптимизировать невозможно • использовать обратную связь (спиннеры, заблокированные кнопки) • использовать особенности восприятия (приветственный экран Apple — муляж, фотография последнего экрана)
  168. 168. Правильная обратная связь
  169. 169. Обратная связь курильщика 100
  170. 170. Обратная связь курильщика 100
  171. 171. Обратная связь курильщика 101
  172. 172. Обратная связь курильщика GET http: //localhost/ 500 Internal Server Err… 101
  173. 173. Обратная связь курильщика GET http: //localhost/ 500 Internal Server Err… 101 Some error happened
  174. 174. Обратная связь здорового человека 100
  175. 175. Обратная связь здорового человека 100
  176. 176. Обратная связь здорового человека 100
  177. 177. Обратная связь здорового человека GET http: //localhost/ 500 Internal Server Err… 100
  178. 178. Обратная связь здорового человека GET http: //localhost/ 500 Internal Server Err… 100
  179. 179. Обратная связь здорового человека GET http: //localhost/ 500 Internal Server Err… 100Что-то пошло не так и ваш голос не зачёлся
  180. 180. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK
  181. 181. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK — Клик!
  182. 182. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK
  183. 183. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK — Клик!
  184. 184. Обратная связь курильщика: 2 Месть обратной связи Очень остроумный коммент| OK
  185. 185. Обратная связь курильщика: 2 GET http: //localhost/ 204 Месть обратной связи Очень остроумный коммент| OK Очень остроумный коммент
  186. 186. Обратная связь курильщика: 2 GET http: //localhost/ 204 Месть обратной связи GET http: //localhost/ 204 Очень остроумный коммент| OK Очень остроумный коммент Очень остроумный коммент
  187. 187. Обратная связь курильщика: 2 GET http: //localhost/ 204 Месть обратной связи GET http: //localhost/ 204 Очень остроумный коммент| OK Очень остроумный коммент Очень остроумный коммент 👎 👎
  188. 188. Обратная связь здорового человека: 2 Новая надежда Очень остроумный коммент| OK
  189. 189. Обратная связь здорового человека: 2 Новая надежда Очень остроумный коммент| OKOK — Клик!
  190. 190. Обратная связь здорового человека: 2 Новая надежда Очень остроумный коммент| OKOK
  191. 191. Обратная связь здорового человека: 2 GET http: //localhost/ 204 Новая надежда Очень остроумный коммент| OK Очень остроумный коммент
  192. 192. Обратная связь здорового человека: 2 GET http: //localhost/ 204 Новая надежда Очень остроумный коммент| OK Очень остроумный коммент 👍
  193. 193. Обратная связь здорового человека: 2 GET http: //localhost/ 204 Новая надежда Очень остроумный коммент| OK Очень остроумный коммент 👍 Очень остроумно!
  194. 194. Скриншот
  195. 195. Mac OS во время загрузки чтобы создать впечатление мгновенной инициализации ОС, Mac показывает скриншот последнего состояния страницы, а в фоне производит необходимые вычисления
  196. 196. Динамическая прокрутка если элементы не успели прорисоваться при быстрой прокрутке, можно показать их муляжи, которые при остановке скролла заменятся на настоящие
  197. 197. Алгоритм оптимизации
  198. 198. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор
  199. 199. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти
  200. 200. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. проверить частоту кадров, вероятно её можно снизить
  201. 201. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. проверить частоту кадров, вероятно её можно снизить 3. использовать все возможные ресурсы для расчётов
  202. 202. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. проверить частоту кадров, вероятно её можно снизить 3. использовать все возможные ресурсы для расчётов 2. Добавить обратную связь в интерфейс
  203. 203. Алгоритм оптимизации 1. Уменьшить нагрузку на процессор 1. использовать меньше памяти 2. проверить частоту кадров, вероятно её можно снизить 3. использовать все возможные ресурсы для расчётов 2. Добавить обратную связь в интерфейс 3. Начать оптимизацию памяти 👋
  204. 204. 👏 Спасибо!
  205. 205. o0.github.io латинская «о», ноль

×