Блокируется ли загрузка страницы

hike · January 13, 2015

Хотелось бы проконсультироваться вот по какому вопросу.

Мне известно, что JS-скрипт, расположенный на удаленном интернет-ресурсе и подгружаемый на html-страницу вот так:

<script src="https://www.example.com/copy.js"></script>

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

Вопрос, будет ли блокироваться загрузка html-страницы, если браузер встретит теги:

<img src="https://www.example.com/mini.png" />

<div style="background: url(https://www.example.com/copy.css)"></div>

<object data="https://www.example.com/any.swf"><param value="https://www.example.com/any.swf" name=trailer></param></object>

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

Switch74 · January 13, 2015

все файлы находящиеся в body грузятся после отображения body

все в head грузится до отображения

Galaxy · January 13, 2015

скрипты лучше подключать асинхронно. Насколько я знаю блокироваться загрузка страницы если браузер встретит те тэги не будет.

Edited January 13, 2015 by Galaxy

hike · January 13, 2015

Как долго браузер будет ждать окончания загрузки файлов css, swf и png, если указанные теги img, object и div style="" расположены в body?

Допустим, загрузить не удалось. Имеем html-страницу без стилей, картинок и flash-объектов. Никаких других побочных эффектов не будет? Я имею ввиду диалоговые окна с предупреждением об ошибке или страница "404 - not found", или что-то еще.

Сможет ли посетитель работать с html-страницей (скажем, отправить форму), так и не дождавшись загрузки стилей, картинок, flash. Одним словом, будет ли страница реагировать на действия посетителя одновременно с загрузкой фалов css, swf и png?

Galaxy · January 13, 2015

Вам проще самому нагуглить про отрисовку страницы. Типа http://web-standards.ru/articles/front-end-performance/#section:resource-prefetching

http://webo.in/articles/all/2009/31-rending-restyle-reflow-relayout/

Edited January 13, 2015 by Galaxy

hike · January 13, 2015

Спасибо!

Great Rash · January 13, 2015

Пока не загрузится файл стилей юзер вообще не должен увидеть страницу. Но это маловероятно (если только при очень медленном интернете вроде GPRS на мобиле), т.к. файл стилей очень редко весит больше десятка килобайт. Если в стилях встречаются картинки, то грузиться они будут уже после того как отрендерится страница. А вообще я рекомендую вам пройти в инструменты разработчика (F12 практически в любом браузере), открыть там профилировщик и посмотреть когда и какие запросы к серверу отправляются.

Любые медиа-файлы (картинки, флеш и т.п.) грузятся асинхронно.

klierik · January 13, 2015

@Great Rash, знаешь, я бы с тобой согласился бы, если бы не имел личного опыта в течении последнего года пользования не стабильным интернетом.

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

Так же размер CSS очень часто переваливает за 10КБ. Лог grunt типичного проекта (да, тут много мусора, но не настолько что бы влезть в 10КБ):

File skin/frontend/default/fun/build/css/styles.min.css created: 316.63 kB → 217.43 kB → 43.14 kB (gzip)

По теме:

1) <img /> грузится после onDocumentLoaded, асинхронно

2) все что в CSS -- будет грузится после загрузки самого CSS, асинхронно

3) любой скрипт в <body> будет блокировать загрузку, если он не async

Если интересна тему асинхронной последовательной загрузки скриптов -- гуглить в сторону LABjs ( https://github.com/getify/LABjs )
Если в коде встречается "inline script", например, jQuery, то он выдаст ошибку, так как отработает до загрузки jQuery. Решается это созданием "очереди", например так:

В <head> создаем переменную для очереди.

<?php // INIT jQuery Queue ?><script type="text/javascript">var queue=[];</script>

Потом в <body> вместо обычного .ready() можно описать так:

<script type="text/javascript">    queue.push(function($){        // code here    });</script>

В Футере, в свою очередь, запускаем все что в очереди поочередно так:

<script type="text/javascript">    domready(function(){        $LAB.script("<?php echo $this->getSkinUrl("build/js/jquery.min.js"); ?>").wait(function(){            <?php // Run jQuery scripts ?>            try { jQuery(function(){ while (queue.length){queue.shift()(jQuery)} }) }            catch (e) { console.log(e) }        })    });</script>

про ф-ю domready() можно почитать тут: https://github.com/ded/domready

CSS, кстати, тоже можно грузить асинхронно при помощи loadCss.
А в тех случаях когда CSS файл "жирный", то поможет criticalCss для пользователей, у которых нет стилей в кеше.

Для шрифтов существует webFontLoader.

Так же, в идеале, добится картинки, когда пользователь грузит с сервера самодостаточный HTML файл, в котором уже есть стили (criticalCss), сумарным весом не более 14КБ (первый запрос на сервер равен 10 пакетам по 1.4 КБ) в сжатом виде -- В таком случае получив только HTML пользователь уже взаимодействует со страницей, в то время как в фоне грузятся остальные ресурсы.

Great Rash · January 13, 2015

а и с других (например шрифты гугла), но страница может не отобразится вообще, даже если будет загружена на 90%

Дык это когда внутри <head> стили подключаются. Тут логично.

Так же размер CSS очень часто переваливает за 10КБ.

Согласен, тут я неверно выразился - хотел написать десятков килобайт. Но даже 100 килобайт разве проблема для GPRS например?

100KB = 800Kb значит при скорости 256 Kb/s грузиться будет примерно 3 секунды. Как по мне, для мобилы вполне нормально.

klierik · January 13, 2015

Дык это когда внутристили подключаются. Тут логично.

не важно где, что в <head> что в <body>, запрос к удаленному ресурсу, не асинхронный, может "повесить" страницу на каком-то этапе её загрузки.

Согласен, тут я неверно выразился - хотел написать десятков килобайт. Но даже 100 килобайт разве проблема для GPRS например? 100KB = 800Kb значит при скорости 256 Kb/s грузиться будет примерно 3 секунды. Как по мне, для мобилы вполне нормально.

В реальной ситуации такого не будет по главной причине: канал не стабилен, провалы в пингах постоянные. Даже на 3G файл может скачаться за секунды, а после F5 страница будет грузится в десятки раз дольше.

Когда eth кабель в ноуте торчит, где-то на материке, то даже если скорость маленькая, но она стабильная. С "воздухом" на практике все может быть иначе.

Возьмем в качестве примера реальную ситуацию с предоставлением услуги 3G, где нибудь за рамками привычных нам городов -- о. Боракай, на Филиппинах. В один день 3G может спокойно выдавать до полуметра в секунду международного трафика, на другой день скорость может не превышать 10-20КБ с частыми потерями пакетов, особенно для международного трафика.

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

Но, связь же не потеряна, а с перебоями, и запрос может "оживать" предполагая что вот-вот получит ответ, так как у нас не 100% потерь, а всего лишь перебои. В такой ситуации совсем печаль -- ждать загрузки страницы можно до бесконечности.

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

Сложившееся мнение о том что скрипты надо добавлять перед закрывающемся </body> -- верное, не не законченное.
Описать загрузку ресурсов следует таким образом, что бы пользователь получив HTML -- мог им пользоваться, и всё что требуется за рамками контента следует догружать в фоне, асинхронно и поэтапно, в то время пока пользователь, например, читает статью на веб ресурсе.
В таком случае если будет обрыв то самым "страшным", но второстепенным, будет будет лишь отсутствие какого-то функционала на странице. Но, пользователь, по крайней мере, получит то за чем он пришел -- контент. Ему и даром не нужны все наши навороченные скрипты, меню, анимации, реклама и прочие дополнения. Его интересует контент.

Great Rash · January 13, 2015

не важно где, что вчто в, запрос к удаленному ресурсу, не асинхронный, может "повесить" страницу на каком-то этапе её загрузки.

Какие удалённые ресурсы кроме скриптов можно подрубить в боди? Не считая медиа-контента.

klierik · January 13, 2015

Какие удалённые ресурсы кроме скриптов можно подрубить в боди?

ам... о них и шла речь. наверно я не совсем очевидно выразился

Sign In

Блокируется ли загрузка страницы

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information