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

Недавно набрел на перевод статьи “Optimizing Page Load Time”. Статья в целом очень интересная и полезная. В глаза бросился один абзац, в котором говорится об ограничениях на количество единовременных соединений, у разных типов браузеров:

По умолчанию, в IE можно установить только два внешних соединения на один хост при запросе на сервер, поддерживающий HTTP/1.1, или всего 8 исходящих соединений. В Firefox’е действуют те же самые ограничения. Использование о 4 хостов вместо одного может обеспечить большее число одновременных соединений (IP-адрес в таком случае не играет роли: все хосты могут указывать на один адрес.)

Не со всем сказанным я согласен, а так же хотел кое-что дополнить:

Во-первых, слова относительно того, что Firefox-е действуют те же ограничения, что и на InternetExplorer не соответствуют действительности. По моим наблюдениям FireFox может устанавливать четыре одновременных соединения на один домен. Таким образом на 4 разных домена возможно установить 16 соединений, а не 8, как сказано в статье.

Во-вторых, не все йогурты одинаковы полезны. А именно, несколько единовременных соединений можно установить только в случае, когда браузер загружает изображения. Причем это справедливо для всех популярных браузеров: Opera, Internet Explorer и FireFox. В случае с загрузкой скриптов, каждый из браузеров позволяет устанавливать только одно соединение. При этом дополнительные соединения для незагруженных картинок не устанавливаются, пока не загрузится скрипт.

В-третьих, при загрузке файлов со стилями (css) Opera и InternetExplorer устанавливают максимальное количество, допустимых для них, единовременных соединений, а вот FireFox грузит каждый файл по отдельности. Это значит, что если на странице будет множество файлов со стилями FireFox будет проигрывать в скорости по сравнению с другими браузерами.

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

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

  подписаться на блог