Что происходит за кулисами, когда браузер отображает страницу без форматирования?

Question

Например, время от времени Facebook загружается практически без графики и с кучей стандартных ссылок синего цвета в левой части страницы.

Иногда кажется, что проблема в подключении к интернету, а иногда просто в этом сайте. Мне бы хотелось услышать подробное объяснение проблемы.

Answer 1

Обычно это означает, что главная HTML-страница содержит ссылку на таблицу стилей CSS, которая (по какой-то причине) не загрузилась. Поскольку таблица стилей недоступна, браузер отображает страницу, используя стили по умолчанию (теряя таким образом информацию о позиционировании, фоновую графику, цвета ссылок и т. д., указанные в CSS). В частности, многие современные веб-сайты используют CSS для позиционирования своих <div>s на экране, поэтому без CSS навигационные ссылки отображаются в своей позиции по умолчанию (выровненные по левому краю, идущие вниз по странице).

Возможные причины:

• Нестабильное сетевое соединение (например, загрузка ресурсов прервалась после загрузки главной страницы)
• Потеряно подключение к Интернету, при этом основная HTML-страница остается в кэше
• Вы отменили загрузку страницы после загрузки HTML-страницы, но до загрузки ресурсов.

• Сервер вернул пустой ответ (возможно, из-за плохого локального сетевого соединения, плохого прокси-сервера или временного сбоя сервера).

  Одним из распространенных случаев является то, что HTML-страница размещена на одном веб-сайте или домене, а большинство связанных ресурсов находятся на другом домене. Например, Super User ( superuser.com) относится к таблицам стилей и изображениям пользовательского интерфейса (например, стрелкам голосования) на cdn.sstatic.net, аватарам пользователей на на www.gravatar.comи изображениям контента на stack.imgur.com. Если sstatic.netвременно отключается, но superuser.comостается активным, вы получите эффект, аналогичный тому, что вы описываете.

Вы упоминаете, что на странице отображается "почти вся графика". Возможно, что веб-сайт определяет большую часть своей графики как фоновые изображения с помощью CSS. Скорее всего, большинство ресурсов, на которые ссылается страница (включая таблицы стилей и изображения), не загружаются. Это приводит к обеим проблемам, которые вы описываете (потеря форматирования и потеря изображений).

Изображения, которые загружаются, либо не затронуты сбоем сервера или прокси-сервера (изображения часто размещаются на разных серверах или доменах с главной веб-страницей), либо уже были в кэше вашего браузера (поэтому браузер не пытается извлечь их, избегая ошибки).