Как читать Flame Chart в Chrome (и не запутаться)

Описание: 👉 Курс «Основы проектирования фронтенд-систем»: https://icodeit.thinkific.com/courses...

👉 Книга «Основы проектирования фронтенд-систем»: https://leanpub.com/frontend-system-d...

Когда вы открываете панель «Производительность» в инструментах разработчика Chrome, происходит много всего — скриншоты, сеть, ЦП, повсюду блоки диаграмм Flame Chart. Легко потерять из виду первоначальный вопрос: почему эта страница работает медленно?

В этом видео мы рассмотрим одно целенаправленное исследование: приложение Board, где открытие модального окна редактирования карточки на мгновение зависает интерфейс. Мы запишем это взаимодействие, найдем «Долгосрочную задачу», прочитаем диаграмму Flame Chart, а затем используем метод «снизу вверх», чтобы определить, куда ушло время — прежде чем перейти к использованию useMemo или другим случайным исправлениям.


Вы узнаете:

Как записать одно взаимодействие, не заглушая сигнал
Что означают желтый/фиолетовый/зеленый цвета на основной дорожке
Как читать диаграмму «Пламя» (время, глубина стека, ширина)
Как сравнение времени выполнения снизу вверх и общего времени помогает находить проблемные места
Почему нужно проводить повторные измерения после исправления
Итоговый вывод: Диаграмма «Пламя» не выберет оптимизацию за вас. Она предоставляет доказательства — чтобы вы могли выбрать решение, а не гадать.

---

00:00 Почему панель «Производительность» кажется слишком сложной
01:36 Проблема демоверсии — медленное модальное окно редактирования карточки
02:42 Запись одного сфокусированного взаимодействия
04:32 Определение периода активности (Основной трек + цвета)
06:22 Задача и длительная задача
08:02 Чтение диаграммы «Пламя»
09:45 Преодоление шума
12:07 Использование подхода «снизу вверх» (Собственное время против общего времени)
15:54 Замыкание цикла — повторные измерения

📘 МОИ КНИГИ И КУРСЫ

👉 Основы проектирования фронтенд-систем (курс): https://icodeit.thinkific.com/courses...
👉 Основы проектирования фронтенд-систем (книга): https://leanpub.com/frontend-system-d...
👉 Антипаттерны React (Amazon): https://www.amazon.com/dp/1805123971
👉 Больше уроков по продвинутым шаблонам: https://icodeit.com.au/tutorials/adva...

📩 ОСТАВАЙТЕСЬ НА СВЯЗИ

🧠 Новостная рассылка (проектирование систем и чистый код): https://juntao.substack.com
🌐 Веб-сайт и блог: https://icodeit.com.au
🐦 Twitter / X:   / juntaoqiu  
📺 YouTube (подпишитесь):    / @icodeit.juntao  

Компания JetBrains любезно предоставила скидку 20% для зрителей этого канала.

Используйте код ICODEIT20 при покупке персональной годовой лицензии в магазине JetBrains. Код действителен до 30 июня 2027 года.

Для обеспечения прозрачности: JetBrains также предоставила мне бесплатную лицензию на пакет All Products Pack. Никаких требований к тому, что я говорю об их инструментах, нет.

#frontend #systemdesign #performance #chromedevtools #flamechart #react #webperformance #javascript