Как Facebook показывает прогресс загрузки браузера во время загрузки страниц AJAX?

Question

Чтобы клиент IM всегда оставался в системе, Facebook избегает полной загрузки страниц, используя AJAX для загрузки своих страниц перед их вставкой в ​​документ.

Однако во время запросов Facebook AJAX браузер явно загружается; кнопка перезагрузки меняется на X, а индикатор прогресса, встроенный в браузер, указывает на загрузку / ожидание и т. д.)

Мне удалось успешно реализовать навигацию на основе AJAX, но мой браузер не показывает никаких признаков загрузки (поскольку запросы асинхронные), как это делает Facebook?

Answer 1

Браузер отображает состояние загрузки, когда в документе есть элемент, который загружается. Ajax-запросы выполняются полностью из JavaScript; на документ это не влияет, поэтому состояние загрузки не вызывается.

С другой стороны, большинство запросов Facebook выполняется путем вставки в документ тега <script>, указывающего на файл JavaScript, содержащий нужные данные. (По сути, JSONP, за исключением того, что они используют другой формат.) Браузер отобразит свое состояние загрузки, поскольку тег <script> является незагруженным элементом в документе.

Этот метод / JSONP может подвергнуть ваш сайт угрозам безопасности, если вы не будете осторожны, поскольку разрешены межсайтовые запросы. Facebook решает эту проблему, генерируя случайные URL-адреса для каждого ресурса, которые отправляются в браузер при начальной загрузке страницы.

Answer 2

Facebook использует инструмент, который они разработали, под названием Big Pipe, чтобы в основном транслировать свой сайт клиенту частями.Они отправляют начальный тег сценария с пустым DOM клиенту, и сценарий загружает модули на странице асинхронно - идея заключается в том, что клиент представляет модуль 1, пока сервер выбирает модуль 2, что улучшает время загрузки.

Кроме того, они используют технику, которая называется long polling .С HTTP 1.1 они могут использовать постоянное соединение и не беспокоиться о тайм-аутах.Когда страница отображается, клиентский скрипт отправляет AJAX-запрос в Facebook, чтобы «прослушать» событие.Он будет сидеть и слушать, пока не произойдет событие.Тем временем браузер будет «загружать» данные.

Когда событие запускается в конце Facebook (скажем, кто-то прокомментировал вашу запись на стене), FB отправит этот ответ клиенту для запуска соответствующих обратных вызовов (например, всплывающая подсказка, сообщающая вамо комментарии) и НЕМЕДЛЕННО отправьте еще один запрос в FB для прослушивания следующего события.

Answer 3

Facebook использует фреймы iframe для связи, когда они хотят, чтобы браузер отображал статус «занят». Вы можете использовать iframes для выполнения междоменного ajax, имея функции вызова iframe в родительском окне.