Почему скрипты в конце тега body

Я знаю, этот вопрос задавался много раз, но я не нашел ответа. Так почему же рекомендуется включать скрипты в конце тега body для лучшего рендеринга?

из курса Udacity https://www.udacity.com/course/ud884 - рендеринг начинается после того, как DOM и CSSOM готовы. JS-это блокировка синтаксического анализа HTML, и любой скрипт запускается после того, как CSSOM готов.

Итак, если мы получили:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="script.js"></script>
    </body>
</html>

CRP будет:

CSSOM ready > JS execute > DOM ready > Rendering

и если скрипт во главе:

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

CRP будет таким же:

CSSOM ready > JS execute > DOM ready > Rendering

этот вопрос касается только скриптов" sync " (без атрибута async / defer).

12
css html javascript pageload web

4 ответов

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

дальнейшее значение:async и defer атрибуты.

15

на мой взгляд, это устаревшая практика. В последнее время предпочтение отдается JavaScript для разделения любого кода, который требует, чтобы DOM присутствовал в прослушивателе событий "DOMContentLoaded". Это не обязательно все логика; много кода можно инициализировать без доступа к полному DOM.

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

4

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

1

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

речь идет не о загрузке всего сайта быстрее, но дает пользователь впечатление от какой-то загрузки сайта быстрее.

например: Вот почему веб-сайты на основе Ajax могут дать гораздо более быстрое впечатление. Интерфейс всегда один. Просто некоторые части контента изменятся.

1