Отказ от блокировки откладывания до перемещения script снизу

Я предполагаю, что перемещение script в дне аналогично использованию атрибута defer или async. Поскольку defer и async не полностью унаследованы от браузера, я пошел с загрузкой script в нижней части страницы.

<html>
<body>
<!-- whole block of  html -->
<script type='text/javascript' src='app.js'></script>
</body>
</html>

Прежде чем сделать это, я запустил инструменты производительности производительности, такие как GTmatrix и понимание скорости страницы Google. Оба показаны как параметр "блокировка вывода" как основная проблема. Я немного запутался, так как даже после того, как я переместил эти сценарии внизу, чтобы сначала загрузить контент /html; эти инструменты по-прежнему сообщают о блокировке в качестве основной проблемы.

Я просмотрел другие сообщения stackoverflow, подчеркивающие, что хотя скрипты, загруженные на дне , должны иметь атрибут defer.

У вас есть много вопросов, подобных

  • выше true?
  • Эти инструменты специально ищут атрибут 'defer' или 'async'?
  • если мне нужно дать откат w.r.t defer (особенно для браузеров IE), нужно ли использовать условные операторы для загрузки сценариев без отсрочки для IE?

Просьба предложить наилучший подход. Заранее благодарю вас.

ОТВЕТЫ

Ответ 1

  • Да, скрипты, загружаемые даже внизу, должны иметь атрибут defere, если это возможно в дизайне сайта и требованиях

  • нет, эти инструменты ищут завершение разбора

  • зависит от версии IE, которую вы хотите поддержать, у них будут разные рекомендации.

Теперь немного объясним простые script, defer и async, чтобы помочь вам понять причины:

Script Простой тег <script> остановит разбор в этой точке, пока script скачать и не выполнит.

Асинхронный Если вы будете использовать async, то script не прекратит синтаксический анализ для загрузки, поскольку он будет продолжать загрузку параллельно с остальной частью содержимого html. Тем не менее, script остановит синтаксический анализ для выполнения, и только тогда разбор html продолжит или завершит

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

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

Ответ 2

Вместо async, может быть, что-то вроде этого (спасибо @guest271314 за идею)

<!DOCTYPE html>
<html>
<body>
<!-- whole block of  html -->

<!-- inline scripts can't have async -->
<script type='text/javascript'>
function addScript(url){
document.open();
document.write("<scrip" + "t src = \"" + url + "\"></scr" + "ipt>");//weird quotes to avoid confusing the HTML parser
document.close();
}
//add your app.js last to ensure all libraries are loaded
addScript("jquery.js");
addScript("lodash.js");
addScript("app.js");
</script>
</body>
</html>

Это то, что вы хотели? Вы можете добавить атрибуты async или defer в вызов document.write, если хотите.

Ответ 3

В соответствии с HTML Spec 1.1 Блок script на html-странице блокирует рендеринг страницы до того, как будет загружен и обработан файл javascript в URL-адресе.

Добавление script в конце страницы: разрешить браузеру продолжать рендеринг страницы, и, следовательно, пользователь сможет увидеть рендеринг страницы как можно скорее.

[Предпочтительный] Добавление отложенного к тегу script: promises браузера, в котором script не содержит документа document.write или документа, изменяющего его код, и, следовательно, позволяет продолжить рендеринг.

Как предыдущий поток может быть вам полезен

Необходимо ли размещать скрипты в нижней части страницы при использовании "defer" атрибут?