Ты знаешь о чем я говорю. Эти разрывы веб -сайтов, которые представляют анимированные серые коробки, в то время как они асинхронно извлекают свой контент. Для секунды . Ни у кого нет секунд. Дай мне контент сейчас!
Проект регби это фантастическое приложение по регби. Это в раннем развитии. Наша главная особенность – Страница статистики игрока . Эта страница фактически представляет собой прославленную таблицу: она позволяет быстро искать и сортировать ~ 800 игроков в сезоне Super Rugby.
До сегодняшнего дня он загрузился довольно быстро. Вот процесс:
- Браузер делает
Получитьзапрос на/игроки-статы - Драфт регби отвечает с группой HTML, CSS и JS
- Браузер запускает JS, который включает в себя немедленное
Получитьзапрос на/api/fantasy/player/listVis Драфта - Драфт регби отвечает с кучей JSON
- Браузер ест JSON и заполняет таблицу игроков
Шаг 3 – это асинхронный запрос на JavaScript, ведущий к манипуляциям с документами, обычно известным как «Ajax». Это хорошо, потому что пользователь теперь может сортировать и искать таблицу. Каждый раз, когда они это делают, более асинхронные запросы делаются, чтобы получить им нужные данные, и заполнять таблицу.
За исключением того, что это не Всегда Приятно, из -за скорости света. В идеальном случае, когда клиентское устройство говорит, в 30 километрах от центра обработки данных может быть 50 миллисекунд между началом шага 1 и началом шага 3. В случае с Draft Sport потребовалось колоссальные ~ 270 мс, чтобы закончить всю последовательность и начать анимировать стол.
Ни у кого нет времени на 270 мс! Пользователь заметит эту задержку без вопросов. И это ухудшается: система визуальной обработки вашего пользователя должна проанализировать вашу модную анимацию загрузки, пока происходит асинхронный запрос. Затем необходимо сбросить эту информацию и повторно провести фактическое содержание страницы.
Не делай этого! Это отстой! Давайте перенесем начальную загрузку таблицы обратно на сервер. Теперь последовательность выглядит так:
- Браузер делает
Получитьзапрос на/игроки-статы - Проект регби отвечает с группой HTML, CSS и JS, включая содержание таблицы статистики игрока, полученного через Проект Sport Py Анкет
- Браузер рисует все
От 5 шагов до 3. В настоящее время:
- Нет двойной обратной поездки в центр обработки данных, чтобы получить начальные данные
- Нет загрузки анимации для пользователя, чтобы разобрать
Какой компромисс? Это зависит от распоряжения вашего API. Draft Sport API – не самая быстрая вещь в мире, но для получения таблицы игроков требуется около 50 мс. Этот запрос теперь блокирует время на первое место, замедляя доставку страницы на 50 мс.
Синхронный результат все еще намного лучше. Время, пока контент не будет полностью представлен, падает от ~ 450 мс до ~ 200 мс. По мере того, как API созревает и становится быстрее, это время упадет дальше, тогда как скорость света никуда не денется. А в реальном мире ваш пользователь не будет на 20 мс от вашего обработки данных. Чем дальше они, более быстрее становится синхронная просьба. Ваша структура не может обогнать скорость света!
Вывод? Не бойтесь удержать возвращение вашего первого байта с помощью запроса API на стороне сервера. Если вы знаете, какие данные хотят клиент, ваше общее время для отображения контента, вероятно, будет значительно ниже, чем если вы вернете его асинхронно с помощью запроса AJAX.
-Хью
Оригинал: “https://dev.to/hugh_jeremy/mixing-synchronous-and-asynchronous-requests-for-serious-speed-29gn”