Алексей Яковлев,

Frontend Community Lead, Яндекс Практикум

Профилирование Node.js, �или Как ускорить Практикум �в несколько раз

Кто я такой

2

• Развиваю фронтенд и его сообщество �в Практикуме
• Помогаю командам преодолевать препятствия

Яндекс Практикум

— это сервис онлайн-обучения, где можно стать профессионалом в IT

Ну а на фронтенде это 5-летний React монолит с самописным BFF, но об этом потом

Количество активных студентов, которые живут в тренажёрах

Яндекс Практикум

— это сервис онлайн-обучения, где можно стать профессионалом в IT

​

Количество активных студентов, которые живут в тренажёрах

​

О чём пойдёт речь

• Почему мы взялись за скорость фронтенда
• Какой была производительность�фронтенда Практикума
• Как мы подступились к диагностике
• Почему начали фиксить не то, что нужно
• Какие результаты в итоге получили
• …и чему научились

Очень долго загружается и глючит

Последнее время что-то долго думает

Всё очень медленно грузится

Мне нравится интерфейс. Но иногда бывает,

что медленно загружается

Долго прогружаются страницы. Именно �в Практикуме, остальные нормально

Интерфейс медлителен, тяжеловат

Есть минусы — долгая загрузка

уроков и тем

Вот что говорили наши студенты

Очень долго происходит проверка задания со стороны платформы, настолько долго, настолько это наносит урон и так по пошатнувшейся психике учащегося, что лично я проклинаю того, по чьей вине так долго грузит платформа. �Уж простите, говорю то, что думаю.

​

Чтобы тот, кто написал такой плохой движок для платформы Практикума, стал фанатичным графоманом и писал в Википедии самые бесполезные и мерзкие статьи. Вот моё ему пожелание.

Вот что говорили наши студенты

Очень долго загружается и глючит

Последнее время что-то долго думает

Все очень медленно грузится

Мне нравится интерфейс. Но иногда бывает,

что медленно загружается

Долго прогружаются страницы. Именно в Практикуме, остальные нормально

Интерфейс медлителен, тяжеловат

Есть минусы — долгая загрузка

уроков и тем

график ходит волнами

LCP > 6s — очень много

график ходит волнами

TTFB

FCP

LCP

TTFB

FCP

LCP

TTFB

FCP

LCP

TTFB

FCP

LCP

Как измерить производительность API

график BFF

ходит волнами

время ответа BFF

в разы выше бэкенда

график BFF

ходит волнами

Куда ставить console.log?

30 мидлварь

30 мидлварь

Обработчик

Server Side Rendering

DevTools

Профайлер Node.js

1

2

3

4

Профайлер Node.js

1

2

3

4

Профайлер Node.js

1

2

3

4

Профайлер Node.js

1

2

3

4

ПОЧЕМУ?

• Object.assign(Context, ContextKeeper) бесполезен, можем удалить

• Object.assign(Context, ContextKeeper) бесполезен, можем удалить

• Вычисление value тоже не нужно

• 2(!) reduce�с Object Spread аккумулятора внутри

А почему всё тормозило?

https://www.richsnapp.com/article/2019/06-09-reduce-spread-anti-pattern

for (let i = 0; i < length; ++i) {� for (let g = 0; g < i; ++g) {

// …

}�}

reduce((acc, elem) => {

return { …acc, [elem]: elem }

}, {})

reduce({...spread}) => O(n^2)

Новый профайлинг

Куда ставить console.log?

30 мидлварь

30 мидлварь

Обработчик

Server Side Rendering

Всё-таки инструментируем логами

Но подсчёты не сходятся!

Профилировать

в тестовом окружении

Профилировать

в проде

Профилируем в проде

это трассировка?

console.log

ну мы

https://opentelemetry.io

✅ небольшой оверхед

✅ удобно разворачивает асинхронные вызовы

✅ автоматически инструментирует Express и HTTP-запросы

✅ в целом улучшает Observability системы

​

❌ нужно поднимать инфраструктуру

❌ нужно частично инструментировать вручную

​

ClinicJS

✅ автоматические советы «что болит и, возможно, почему»

✅ можно закопаться в детали без инструментации вручную

​

❌ эвристика bubbleprof не всегда упрощает работу

❌ нужно завершить работу приложения, чтобы получить результаты

❌ неудобно профилировать удалённое приложение

❌ высокий порог входа и сложный интерфейс

❌ для синхронных нужд Chrome DevTools более чем достаточно

ClinicJS

Как найти проблему своевременно?

Ставьте алерты

на производительность

Проводите нагрузочное тестирование

Chrome DevTools

• Для профилирования синхронных операций и памяти�

Трейсинг OpenTelemetry

• Для профилирования асинхронных операций и обозреваемости

​

ClinicJS

• Для профилирования асинхронных операций и когда ничего не понятно

​

​

Алерты на пользовательские метрики и тайминги API

• Чтобы замечать замедления клиента

​

Нагрузочное тестирование

• Чтобы знать свои пределы и замечать деградации

Выводы

Спасибо за внимание!

Алексей Яковлев,

Frontend Community Lead, Яндекс Практикум

Telegram�@alexeyjakovlev

Слайды�