7

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

Может быть, кто-то, кто проверил источник Firefox или какой-либо другой браузер, знает об этом чуть более подробно?

2 ответа2

15

Что загружается сайт?

Загрузка веб - страницы более или менее , как загрузка файла. То, что вы получаете от сервера - в большинстве случаев - просто файл HTML, переданный по HTTP. Сначала вы делаете HTTP-запрос к URL-адресу сайта, например GET http://superuser.com .

Как сказал Уильям Джексон, HTTP использует поле заголовка Content-Length чтобы заранее показать вам размер этого файла. Это то, что браузер может оценить, чтобы угадать, насколько он продвинулся в загрузке всего сайта.

Однако это не покрывает все ресурсы, которые HTML-файл может загрузить, ссылаясь на них. Они могут включать в себя:

  • Внешние изображения
  • Внешние таблицы стилей
  • Внешние скрипты
  • Рамки
  • AJAX загружает

Как браузер узнает, сколько нужно загрузить?

Теперь задача браузера - найти эти ссылки и запросить их тоже. Таким образом, для каждой внешней ссылки браузер либо обращается к своему кешу, либо отправляет новый HTTP-запрос. Для Super User это будут следующие файлы, размещенные в сетях распространения контента для повышения производительности:

  • GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js - основной файл jQuery
  • GET http://cdn.sstatic.net/js/stub.js - некоторые функции JS
  • GET http://cdn.sstatic.net/superuser/all.css - таблицу стилей
  • ...

Вы можете увидеть это, используя Firebug или отладчик Chrome, когда вы включаете отслеживание временной шкалы. Это график загрузки Super User, отфильтрованный так, что отображаются только запросы. Нажмите, чтобы увеличить:

Как мы видим, основной сайт суперпользователя загружался бы дольше всего, но каскадирование из него приводит к загрузке других страниц (например, HTTP-запросов или запросов в кэш). Все они также выставляют свои Content-Length , поэтому браузер может догадаться, сколько времени займет загрузка всех этих файлов.

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

Как браузеры реализуют это?

Гугл Хром

Я посмотрел источники Google Chrome (он же Chromium) и нашел этот класс с именем ProgressTracker.cpp. На самом деле, он написан Apple, так что, скорее всего, он основан на движке рендеринга WebKit. Включает в себя следующие поля:

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

Таким образом, как я уже сказал, будет определено общее количество байтов ресурсов, и прогресс будет соответствующим образом изменен. Есть интересный комментарий, который показывает, как повышается реальная важность первой загруженной страницы:

// Для документов, которые используют систему разметки WebCore, обработайте первую разметку как промежуточную точку.

Поэтому, если первая страница загружена (а ее внешние ресурсы еще не загружены), прогресс будет 50%.

Firefox (дополнение Fission)

Теперь есть и немного более простая метрика. Я посмотрел на Fission, расширение индикатора выполнения для Firefox. Если я не читаю это неправильно, это делает то, о чем можно легко думать.

Каждый веб-сайт состоит из нескольких элементов DOM. Анализируя первый HTML-сайт, можно оценить общее количество загружаемых элементов DOM.

Для каждого загруженного элемента DOM увеличьте счетчик и просто отобразите индикатор выполнения в соответствии с ним.

1

Когда браузер запрашивает файл с сервера, сервер может заранее сообщить браузеру, насколько велик размер файла. Сервер делает это, отправляя заголовок Content-Length.

Есть и другая информация о том, как браузер может определить размер загружаемого файла.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .