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

2022-07-22 12:30:01 4) Что с этим делать
— Если вы делаете приложение с нуля, не помещайте API на отдельный сервер ¯\_(ツ)_/¯

— Если у вас приложение уже запущено, перенесите API-сервер с, например,
api.my-app.com/*
на
my-app.com/api/*

Делать это во фронтенд-сервере часто неудобно — но зато это легко сделать на уровне CDN (инструкция для Cloudflare и CloudFront).

— Не обходите CORS ради перформанса, а то получится как у Zoom

***

(Также сообщаю, что до воркшопа по React-перформансу осталась неделя. Приходите, если ещё не!) Открыть/Комментировать

2022-07-22 12:30:01 3) Кеши помогают, но слабо
— DNS resolution (из первого пункта) кешируются на уровне браузера, OS и даже вайфай-роутера. Кеш живёт так долго, как прикажет DNS-сервер — обычно это час или всего 5 минут
— TCP-соединения (тоже из первого пункта) браузер тоже держит открытыми — но всего несколько минут
— Preflight-запросы можно кешировать надолго, но это работает для каждого URL в отдельности

Кешами проблему не решить. Открыть/Комментировать

2022-07-22 12:30:01 ​​2) 2× при каждом запросе
Помните CORS? Каждый раз, когда запрос с одного домена идёт на другой домен, браузер ради безопасности проверяет, разрешен ли такой запрос.

Стандартный способ проверить «разрешён ли запрос» — это сделать preflight-запрос. Перед тем, как отправить настоящий запрос (например, GET api.my-app.com/users/me), браузер делает пробный OPTIONS-запрос (OPTIONS api.my-app.com/users/me) и смотрит, что приходит в ответ.

Такое происходит с любым API-запросом (за редким исключением). Результат — любой запрос на сервер теперь занимает в два раза больше времени ↓

Самое плохое — preflight-запрос нужен на каждый новый URL. То есть если вам для открытия приложения нужно загрузить /users/me, /settings/me и /memes/me, каждый из этих запросов будет в два раза медленнее. Открыть/Комментировать

2022-07-22 12:30:00 ​​Любовь и ненависть к API-доменам
Когда я был просто фулстеком, мне нравилось разносить фронтенд и бекенд по разным доменам (например, my-app.com и api.my-app.com). Когда я стал заниматься перформансом, мне это резко разонравилось. Вот почему.

1) +600 мс при первой загрузке
Каждый раз, когда браузеру нужно загрузить что-то с нового домена, он тратит время на подключение к этому домену. Это относится и к запросам с my-app.com на api.my-app.com.

На обычной 4G-сети подключение к новому домену занимает аж 600 мс. Вот как это выглядит у приложения Typefully ↓

Если у вас нет сервер-сайд-рендеринга, это значит, что посетитель увидит данные на 600 мс позже. И это никак не обойти. Открыть/Комментировать

2022-07-08 12:19:47 Циферки: обучил уже 130 человек, 50 сказали «воркшоп превзошёл ожидания».

Ключевые слова: Chrome DevTools · React Profiler · why-did-you-render · useCallback/useMemo · Redux · useContext · requestAnimationFrame · useTransition (React 18) · Suspense · throttling/debouncing · Web Workers · CSS-in-JS · lazy hydration · update batching · isInputPending()

Приходите. $350 (билет «ранняя птичка» ) или $450 (как только по $350 закончатся). Снова на английском, да. https://smashingconf.com/online-workshops/workshops/ivan-akulov-july Открыть/Комментировать

2022-07-08 12:19:47 ​​Ещё после каждого дня воркшопа у нас будет читлист для каждой проблемы — типа вот такого: Открыть/Комментировать

2022-07-08 12:19:46 ​​ Следующий (восьмой!) поток воркшопа по React-перформансу пройдёт 28 июля — 11 августа у Smashing Magazine.

В воркшопе 10 часов, и все 10 часов мы будем работать с кодом. Выглядит это примерно так:

Берём медленное приложение → Разбираемся, почему тормозит → Чиним → Повторяем

Мы посмотрим на пять видов проблем в React-аппах, поймём, как их отличить, и продебажим и починим каждый кучу раз: Открыть/Комментировать

2022-06-20 16:48:04 7) Ах, да, где почитать больше:

— Suspense SSR Architecture in React 18 — огромный обзор всех новых фич Suspense: https://github.com/reactwg/react-18/discussions/37
— Selective Hydration — что произойдёт, если кликнуть по негидрированной кнопке в середине гидрации: https://github.com/reactwg/react-18/discussions/130 Открыть/Комментировать

2022-06-20 16:37:32 6) Также спешу сообщить, что теперь в этом канале включены премиум-реакции

(Апд: теперь точно да) Открыть/Комментировать

2022-06-20 16:37:27 ​​5) Окей, но если этот рендеринг такой полезный, почему он тогда не используется по умолчанию?

Я не знаю всех причин! Но, предполагаю, потому, что в целом такой рендер занимает большо времени. Например, в моём тестовом приложении гидрация с Suspense занимает в три раза дольше времени, чем без — видимо, потому, что React вынужден всё время отдавать контроль браузеру и забирать его обратно: Открыть/Комментировать