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

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

Итак, если использовать атрибут defer, необходимо физически разместить теги script в нижней части страницы и внутри основного тега?

Мне удобнее хранить теги script внутри раздела главы.

<script src="script.js" defer="defer"></script>

или

<script defer="defer">

// do something

</script>

Ответ 1

Лучшая практика, которую вы задаете? Использовать отложенные сценарии

Почему? Скрипты, расположенные в нижней части страницы, могут отлично работать, поскольку сценарии обычно блокируют параллельные загрузки, как указано в спецификациях HTML/1.1, но использование этого альтернативного атрибута указывает на то, что script не содержать document.write и сообщает браузеру продолжать рендеринг.

Вот лучшее описание использования атрибута defer, который можно отобразить для moz

Ответ 2

С момента написания этих ответов передовой опыт изменился, поскольку во всем мире поддержка атрибута defer выросла до 97%.

Если вам не нужно оптимизировать скорость для старых браузеров, вы должны поместить скрипт в заголовок и отметить как отложенный. Это 1) хранит все ваши ссылки на скрипты в одном месте (более удобные для сопровождения) и 2) позволяет браузеру быстрее узнавать о скрипте, что позволяет ему начать расставлять приоритеты ресурсов раньше.

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

Ответ 3

Прежде всего, атрибут defer не поддерживается всеми браузерами (и некоторые, которые поддерживают его, просто игнорируют его). Ввод script в нижней части страницы гарантирует, что все элементы HTML над ним были загружены в DOM до выполнения script. Альтернативой является метод onload или с помощью jQuery DOM ready.

Ответ 4

Хотя я согласен с вами в том, что использование "отсрочки" и размещения сценариев в заголовке улучшит читаемость, этот атрибут по-прежнему не поддерживается как настольными, так и мобильными Opera (проверьте эту таблицу).

Ответ 5

Существуют разные причины, по которым использование defer в script в нижней части HTML имеет смысл:

Не все браузеры поддерживают "defer". Если вы поместите свой script в HEAD с отсрочкой и браузер не поддерживает отсрочку, script блокирует параллельную загрузку следующих элементов, а также блокирует прогрессивную рендеринг для всего содержимого ниже script.
Если вы просто разместите script внизу, не откладывая браузер, он будет продолжать показывать индикатор занятости, пока страница не закончит разбор JavaScript.
В некоторых случаях "script внизу без отложенного" блокирует прогрессивную рендеринг. Протестировано в Google Chrome 36 и IE11 (см. Комментарий ниже).

Важно знать, что каждый браузер передает такие вещи, как "defer", а также индикаторы занятости немного разные.

Лучшей практикой должно быть: Положить сценарии внизу с отсрочкой.

Помимо аспекта читабельности, я вижу только преимущества, помещая скрипты внизу с отсрочкой по сравнению с "script в Head with defer" или "script внизу без отсрочки".