Глядя на индикатор выполнения браузера, который иногда замедляется ближе к концу во время загрузки веб-страницы, мне стало интересно, показывает ли браузер прогресс в зависимости от размера элементов, присутствующих на странице, или нет. элементов или что-то еще?
Может быть, кто-то, кто проверил источник Firefox или какой-либо другой браузер, знает об этом чуть более подробно?
Загрузка веб - страницы более или менее , как загрузка файла. То, что вы получаете от сервера - в большинстве случаев - просто файл HTML, переданный по HTTP. Сначала вы делаете HTTP-запрос к URL-адресу сайта, например GET http://superuser.com .
Как сказал Уильям Джексон, HTTP использует поле заголовка Content-Length чтобы заранее показать вам размер этого файла. Это то, что браузер может оценить, чтобы угадать, насколько он продвинулся в загрузке всего сайта.
Однако это не покрывает все ресурсы, которые HTML-файл может загрузить, ссылаясь на них. Они могут включать в себя:
Теперь задача браузера - найти эти ссылки и запросить их тоже. Таким образом, для каждой внешней ссылки браузер либо обращается к своему кешу, либо отправляет новый HTTP-запрос. Для Super User это будут следующие файлы, размещенные в сетях распространения контента для повышения производительности:
GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js - основной файл jQueryGET http://cdn.sstatic.net/js/stub.js - некоторые функции JSGET 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%.
Теперь есть и немного более простая метрика. Я посмотрел на Fission, расширение индикатора выполнения для Firefox. Если я не читаю это неправильно, это делает то, о чем можно легко думать.
Каждый веб-сайт состоит из нескольких элементов DOM. Анализируя первый HTML-сайт, можно оценить общее количество загружаемых элементов DOM.
Для каждого загруженного элемента DOM увеличьте счетчик и просто отобразите индикатор выполнения в соответствии с ним.
Когда браузер запрашивает файл с сервера, сервер может заранее сообщить браузеру, насколько велик размер файла. Сервер делает это, отправляя заголовок Content-Length.
Есть и другая информация о том, как браузер может определить размер загружаемого файла.