[Перевод] Ускоряем фронтенд. Когда много запросов к серверу — это хорошо
В этой статье описываются некоторые методы ускорения загрузки фронтенд-приложений, чтобы реализовать отзывчивый, быстрый пользовательский интерфейс.
Мы обсудим общую архитектуру фронтенда, как обеспечить предварительную загрузку необходимых ресурсов и увеличить вероятность того, что они в кэше. Немного порассуждаем, как отдавать ресурсы с бэкенда и когда можно ограничиться статическими страницами вместо интерактивного клиентского приложения.
Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:
Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
Сократить запросы, блокирующие рендеринг
Избегать последовательных цепочек
Повторно использовать соединения с сервером
Сервис-воркеры для мгновенного рендеринга
Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
Проверить, что хэши частей пакета не меняются без необходимости
Запрашивать данные для страницы до загрузки всего приложения
Не блокировать рендеринг загрузкой второстепенных данных
Рассмотреть рендеринг на стороне сервера
Следующая страница: сколько времени требуется для перехода на следующую страницу
Запрашивать дополнительный код до того, как он понадобится
Кэшировать и повторно использовать данные на клиенте
Читать дальше →
Мы обсудим общую архитектуру фронтенда, как обеспечить предварительную загрузку необходимых ресурсов и увеличить вероятность того, что они в кэше. Немного порассуждаем, как отдавать ресурсы с бэкенда и когда можно ограничиться статическими страницами вместо интерактивного клиентского приложения.
Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:
Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
Сократить запросы, блокирующие рендеринг
Избегать последовательных цепочек
Повторно использовать соединения с сервером
Сервис-воркеры для мгновенного рендеринга
Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
Проверить, что хэши частей пакета не меняются без необходимости
Запрашивать данные для страницы до загрузки всего приложения
Не блокировать рендеринг загрузкой второстепенных данных
Рассмотреть рендеринг на стороне сервера
Следующая страница: сколько времени требуется для перехода на следующую страницу
Запрашивать дополнительный код до того, как он понадобится
Кэшировать и повторно использовать данные на клиенте
Читать дальше →
Источник:
0 Комментарии