Иван Акулов про разработку

Public

Просмотреть канал

Не можете присоединиться? @iamakulov_channel

4k Участники

Обновлено: May 26, 2026 at 5:19 PM

Иван Акулов про разработку

JS · React · веб-перформанс · разработка и архитектура Экс: https://x.com/iamakulov По всем вопросам (рекламу не продаю): @iamakulov Чатик канала: @iamakulov_channel_chat

@iamakulov_channel offers specialized information about httpsxcomiamakulov and react for subscribers interested in Кодинг и программирование

Рейтинг

Глобальный рейтинг

#24800

-2373

Рейтинг по языку

#18863

-2162

Рейтинг по категории

#130

-18

Рост участников (Последние 17 дней)

Всего: 4.0K

Рост за 24ч: +0 0%

Последние посты

Иван Акулов про разработку

16 мая 2026 г., 15:38

Привет! Написал новый пост, где реверс-инжинирю минификатор из 2004-го: https://3perf.com/blog/packer/

(Минификатор, внезапно, поддерживает ES2015+ и сжимает код компактнее, чем Terser?!)

5,750

Иван Акулов про разработку

16 мая 2026 г., 15:38

Компонент выше:
— говорит «запускай view transition», когда рендерится
— бросает исключение-промис, что заставляет Реакт ждать
— когда скриншот готов, резолвит промис, что позволяет Реакту закончить рендер

Если поместить этот компонент в конец дерева, то можно запустить view transition в конце рендера. Прямо как с useLayoutEffect, но асинхронно.

Попробуем это решение во Framer в течение недель. Расскажу, как сработает 🙂

11,700

Иван Акулов про разработку

16 мая 2026 г., 15:38

Чёрт, снова вышел длинный пост вместо ссылок

12,200

Иван Акулов про разработку

16 мая 2026 г., 15:38

5) Если хуки не подходят, почему бы не запускать view transition перед началом рендера? Так можно, и Framer делает именно так. Но это создаёт другую проблему: рендер большой страницы может занять секунды, и всё это время страница будет заморожена.

6) Идеальных решений для этой проблемы сегодня нет. Но это не значит, что нет ужасных воркэраундов :D

Воркэраунд — эмулировать асинхронный useLayoutEffect https://blog.logrocket.com/data-fetching-react-suspense/:

8,550

Иван Акулов про разработку

16 мая 2026 г., 15:38

📷 Photo

10,200

Иван Акулов про разработку

16 мая 2026 г., 15:38

View Transitions, React и перформанс
Ну и давайте про челленджи поговорим. Из недавнего — я узнал, что view transitions фризят страницу, и это влияет на перформанс-метрики, которые собирает Google 🫠

Следите за руками:

1) https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API — это новый стандарт, с помощью которого можно анимировать переходы между страницами. Framer поддерживает view transitions, и часть сайтов (в том числе http://framer.com/) их используют

2) Переходы между страницами у Framer-сайтов работают как в любом реакт-приложении: вы нажимаете ссылку, а мы рендерим новую страницу Реактом. Это может быть медленно, поэтому, чтобы не фризить вкладку, мы оборачиваем рендер в startTransition(). ( https://3perf.com/talks/react-concurrency/#react-18)

Тут придёт Никита Прокопов и скажет, что вообще-то https://tonsky.me/blog/js-bloat/, и новую страницу будет гораздо быстрее отрендерить, просто взяв HTML с сервера. Это правда (но, кстати, не всегда — мы измерили!), и мы работаем над этим, но backwards compatibility и бэклог — сложно 😶‍🌫️

3) Проблемы начинаются, когда переходы между страницами анимируются с помощью view transitions. Вот как выглядит переход в этом случае:
— Вы говорите браузеру «запускай view transition»
— Браузер делает скриншот страницы и https://github.com/vercel/next.js/discussions/46300#discussioncomment-5661595
— Вы рендерите новую страницу (реактом/вью/чем угодно)
— Вы говорите браузеру «всё, новая страница готова»
— Браузер анимирует переход

Заморозка страницы — это неприятно. Но ещё неприятнее то, что она совсем не встраивается в жизненный цикл Реакта.

6,390

Иван Акулов про разработку

16 мая 2026 г., 15:38

📷 Photo

4) Удобное место, чтобы сказать «запускай view transition» — это хук useLayoutEffect. Этот хук https://react.dev/reference/react/useLayoutEffect когда React уже закончил рендерить новую страницу, но браузер всё ещё показывает старую. Если запустить view transitions отсюда, то страница будет заморожена буквально долю секунды.

Идеально, да? Нет. «Запускай view transition» — это https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition#callback а useLayoutEffect не поддерживает асинхронность (и вряд ли будет, исходя из архитектуры Реакта).

7,440

Иван Акулов про разработку

16 мая 2026 г., 15:38

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

🙋 Как дела: я закрыл консалтинг! Последние шесть лет я зарабатывал, консультируя компании (Google, CNBC, Toggl и кучу других) про веб-перформанс. Но в 2023-м мой консалтинг-драйв выгорел, и с 2024-го я ушёл в найм. Просуммировал выводы и уроки тут: https://iamakulov.com/notes/lessons-from-self-employment/

(Теперь я лидю веб-перформанс во http://Framer.com/ — это no-code-платформа для создания сайтов. Сайты на Реакте, поэтому перформанс-челленджи интересные :D)

4,930

Иван Акулов про разработку

16 мая 2026 г., 15:38

💻 Воркшоп (нет, канал я оживил не только для этого анонса): в марте пройдёт двенадцатый воркшоп по Реакт-перформансу! В консалтинге я помогал компаниям ускорять Реакт в 2-4 раза; в воркшопе я учу всему, чему сам научился в процессе.

Как выглядит воркшоп: мы берём медленное приложение → дебажим его в Chrome DevTools и React Profiler → находим и чиним боттлнек → повторяем для всех типичных перформанс-антипаттернов. В процессе мы смотрим на дорогие рендеры, гидрацию, startTransition(), перевычисления стилей и ещё пачку всего.

Приходите, цены на билеты вырастут с первого марта :) Отзывы и расписание вот тут → https://fwdays.com/en/event/react-performance-workshop-3

5,330

Иван Акулов про разработку

16 мая 2026 г., 15:38

https://telegra.ph/file/c9640753a0c80d8a821b5.jpgShow all events ( https://github.com/iamakulov/devtools-perf-features#timeline-show-all-events)
Добавляет кучу дополнительных данных в перформанс-трейс. Включаю, когда хочется больше деталей про то, что именно происходит в браузере.

Бонус: если скопировать название ивента и вставить его в https://source.chromium.org/search, то этот сайт покажет, где именно в коде Chromium происходит этот ивент. Полезно, если нужно прям закопаться в поведение браузера

9,040

Иван Акулов про разработку

27 мар. 2026 г., 16:51

https://telegra.ph/file/1ae045755345acf49744c.jpgДве самые любимые:

Event initiators ( https://github.com/iamakulov/devtools-perf-features#timeline-event-initiators)
Добавляет стрелочки между setTimeout() и его колбеком, requestAnimationFrame() и его колбеком, и т.п. Супер-удобно, держу включённым по умолчанию:

8,050

Showing 11 of 11 posts

No more posts

Рейтинг

Требуется вход

Отзывы пользователей (0)

Пока нет отзывов. Будьте первым, кто поделится своим опытом!

Иван Акулов про разработку

Иван Акулов про разработку

Рейтинг

Рост участников (Последние 17 дней)

Последние посты

Рейтинг

Отзывы пользователей (0)

Похожие каналы Telegram

Albinasummer

PM работа. Проектные менеджеры

Русский Модный Код

Литературный коД

Компьютерная математика Weekly

AI Projects

ReLab Family

Книги по программированию

Похожие каналы Telegram

Albinasummer

PM работа. Проектные менеджеры

Русский Модный Код

Литературный коД

Компьютерная математика Weekly

AI Projects

ReLab Family

Книги по программированию

Отзывы пользователей (0)

Последние посты