Jump to content
  • 0

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

hike

Asked by hike,

 Share

Question

hike Explorer

hike

Posted
Posted

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

 

Мне известно, что 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>

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

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
hike Explorer

hike

Posted
  • Author
Posted

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

 

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


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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

 

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

  • Like 1
Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
Posted

@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 пользователь уже взаимодействует со страницей, в то время как в фоне грузятся остальные ресурсы.

  • Like 1
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

 

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

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

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

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

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

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

 

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

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

 

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

 

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

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

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

 

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

 

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept