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

2022-06-20 16:37:27 4) Это, кстати, тот же подход к рендерингу, который React 18 применяет, когда вы используете useTransition или useDeferredValue.

Благодаря такому рендерингу приложение остаётся интерактивным. Если пользователь нажмёт что-то на странице, страница отреагирует сразу же, не дожидаясь, пока рендер закончится. Открыть/Комментировать

2022-06-20 16:37:27 ​​3) Под капотом React использует API типа performance.now() и navigator.scheduling.isInputPending(), чтобы понять, сколько времени занимает рендер.

Если рендеринг продолжается дольше 5-50-300 мс, или если пользователь пытается что-то нажать/ввести в приложении, React приостанавливает рендеринг и отдаёт контроль браузеру. Вот как выглядит функция, которая решает это ↓ Открыть/Комментировать

2022-06-20 16:37:27 ​​2) В React 18 вызов ReactDOM.hydrate() по умолчанию всё ещё очень дорогой.

Но: если обернуть часть приложения в , React возьмёт все компоненты внутри — и вместо того, чтобы рендерить их в один подход, начнёт рендерить их пошагово, 5-10 мс за раз:

1.6K views13:37

Открыть/Комментировать

2022-06-20 16:37:27 ​​ в React 18

Мне очень нравится, как React проапгрейдил и hydration в 18-й версии. Смотрите:

1) В React 16-17 каждый вызов ReactDOM.hydrate() оказывается жутко дорогим.

Когда вы вызываете ReactDOM.hydrate(), React рендерит каждый компонент, который есть на странице. В сложных приложениях таких компонентов много, и вызов ReactDOM.hydrate() вполне может занять и секунду-две.

На всё время вызова страница зависает.

1.7K views13:37

Открыть/Комментировать

2022-06-09 15:56:34 Как мониторить перформанс в React

Собрал гайд по тому, как настроить свой мониторинг React-перформанса — как с живыми пользователями, так и синтетический. Со всеми подводными камнями, про которые знаю: https://3perf.com/blog/react-monitoring/

Зачем это всё
Мой любимый ответ на «как сделать, что приложение оставалось быстрым» — это настроить мониторинг перформанса. Это, конечно, не решает все проблемы (дашборд с мониторингом ещё нужно смотреть, а увиденные проблемы — исправлять), но помогает.

Челленж в том, что готовых инструментов для React-перформанса нет. Для мониторинга скорости загрузки есть миллион сервисов (SpeedCurve, Treo, Lighthouse CI и иже с ними). А вот что, если важна не скорость загрузки, а скорость реакции кнопочек? Придётся настраивать что-то своё — про это и гайд.

(первая статья на 3perf.com за пару лет, да ) Открыть/Комментировать

2022-04-18 13:25:04 ​​Воркшоп по React-перформансу 16-19 мая (на английском)

Я занимаюсь перформансом четыре года. Первый год я работал в основном наугад: тыкался в девтулзах, вспоминал случайно прочитанные лайфхаки, применял их, пока не сработает. Ко второму году у меня начала формироваться система. Третий и четвёртый год я тестировал и укреплял эту систему, применяя её на проектах и проводя закрытые воркшопы. Теперь я готов передать эту систему вам.

Что: 16, 17 и 19 мая (пн, вт и чт) я проведу трёхдневный англоязычный воркшоп про React-перформанс. Это воркшоп не про скорость загрузки, а про скорость работы приложения: про то, что делать, когда нажимаешь кнопку, а страница вместо мгновенной реакции зависает. Будет много Chrome DevTools и React Profiler.

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

Что внутри: ненужные и дорогие рендеры · цепочки ререндеров · антипаттерны редакса и контекста · что происходит в каждом кадре · layout thrashing · инициализация бандла и hydration · новые перф-фичи из React 18.

Чего нет внутри: нет оптимизации анимаций или памяти · нет работы с layers.

Для кого: для тех, кто хорошо знаком с базовыми оптимизациями вроде React.memo() и useMemo — но хочет лучше познакомиться с Chrome DevTools, React Profiler и дебаггингом перформанс-проблем. Если вы хорошо знакомы со штуками типа why-did-you-render и layout thrashing, вам, вероятно, будет скучно.

На английском · билеты от €299, позже — дороже · до 30 человек

Больше деталей и купить билет → https://fwdays.com/en/event/react-performance-workshop Открыть/Комментировать

2022-03-02 12:38:56 Извините, что не пишу про войну. Я не знаю, что написать.

Война — пиздец. Прямо сейчас три близких мне человека сидят в городах Украины под обстрелами и не могут уехать.

Если вы хотите помочь Украине, вот как вы это можете сделать:
— деньгами: https://how-to-help-ukraine-now.super.site/donate
— не деньгами: https://mailchi.mp/getkit.news/helpua

Я продолжу писать про перформанс и разработку, потому что это единственный кусочек нормальной жизни, который сейчас остаётся.

Берегите себя. И сил. Открыть/Комментировать

2022-02-09 13:15:27 Правильный ответ — скачает React заново.
— С 2020-го во всех браузерах кеш каждого сайта хранится отдельно; это сделано для приватности
— А теперь (новости ) Chromium будет делить для каждого сайта не только HTTP-кеш, но и DNS-кеш, соединения, и прочее: https://twitter.com/cramforce/status/1490859573250387977

Что делать
— Если вы загружаете какие-то библиотеки со стороннего CDN-а, потому что «вдруг они уже будут закешированы у пользователя», то не нужно — это не работает. Устанавливайте их из npm и перемещайте в бандл
— Если вы используете Google Fonts, подключите Fontsource
— А если у вас iframe-ы со сторонними ресурсами, со свежими изменениями Chromium вам жопа: «experiment [...] slows cross-site iframe time to first contentful paint by about 5%» (пост) Открыть/Комментировать

2022-02-09 12:30:01 Открыть/Комментировать

2022-02-09 12:30:00 Есть site-a.com и site-b.com. На обоих есть тег

×