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

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

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

​​Show all events (линк) Добавляет кучу дополнительных данных в перформанс-трейс. Включаю, когда хочется больше деталей про то, что именно происходит в браузере. Бонус: если скопировать название ивента и вставить его в https://source.chromium.org/search, то этот сайт покажет, где именно в коде Chromium происходит этот ивент. Полезно, если нужно прям закопаться в поведение браузера

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

​​Две самые любимые: Event initiators (линк) Добавляет стрелочки между setTimeout() и его колбеком, requestAnimationFrame() и его колбеком, и т.п. Супер-удобно, держу включённым по умолчанию:

4) Удобное место, чтобы сказать «запускай view transition» — это хук useLayoutEffect. Этот хук вызывается, когда React уже закончил рендерить новую страницу, но браузер всё ещё показывает старую. Если запустить view transitions отсюда, то страница будет заморожена буквально долю секунды. Идеально, да? Нет. «Запускай view transition» — это асинхронный процесс, а useLayoutEffect не поддерживает асинхронность (и вряд ли будет, исходя из архитектуры Реакта).

View Transitions, React и перформанс Ну и давайте про челленджи поговорим. Из недавнего — я узнал, что view transitions фризят страницу, и это влияет на перформанс-метрики, которые собирает Google 🫠 Следите за руками: 1) View Transitions — это новый стандарт, с помощью которого можно анимировать переходы между страницами. Framer поддерживает view transitions, и часть сайтов (в том числе framer.com) их используют 2) Переходы между страницами у Framer-сайтов работают как в любом реакт-приложении:...

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

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