Где JS-скрипты входят в HTML файл?

Если у вас есть JS-код, который предназначен для запуска как часть загрузки/создания страницы, где в HTML это должно идти? Например, изменение <div> или добавление некоторых ссылок. Должно ли это быть помещено в <body>, вкрапленное HTML? Или это должно быть между элементами <head> и <body>? В каком порядке происходят вещи: порядок, который они находятся на странице, или что все это происходит до того, как выполняется (не <head>) JS?

Ответ 1

Весь файл HTML выполняется в том порядке, в котором он написан, что означает

<html>
  <div id="ID"></div>
  <script type="text/javascript">
    document.getElementById('ID').innerHTML = "HELLO";
  </script>
</html>

изменяет содержимое div, wherease

<html>
  <script type="text/javascript">
    document.getElementById('ID').innerHTML = "HELLO";
  </script>
  <div id="ID"></div>
</html>

не работает, поскольку код JS выполняется до того, как Div загрузился.

EDIT: если вы хотите, чтобы JS запускался после загрузки страницы, используйте window.onload или document.body.onload или

<body onload="...">

Альтернативно, если вы используете JS-библиотеку, такую как jQuery, вы можете использовать

$(document).ready(function() {
  ...
});

Ответ 2

Если у вас есть JS-код, который предназначен для запуска как часть загрузки/создания страницы, где в HTML это должно идти?

Незадолго до закрытия тега </body> становится лучшей практикой, запрещающей конкретное требование, чтобы оно было где-то еще (что иногда может быть). Например, рекомендация людей YUI, но это не только они.

В каком порядке происходят события: порядок, который они находятся на странице, или все, что происходит в HTML, перед запуском (не) JS?

Когда встречается тег script, если вы не используете атрибут defer или async (и браузер поддерживает их), все синтаксические разборки HTML доходят до визга, и script загружается и передается интерпретатору JavaScript. Когда интерпретатор JavaScript завершит обработку script, анализатор HTML может продолжить работу. Он должен сделать это, потому что JavaScript может вставлять токены в поток HTML через document.write. Вот почему вы можете загрузить файл script, а затем загрузить второй файл script, который опирается на первый, и знать, что они будут загружены в правильном порядке. Кроме того, почему вы не можете получить доступ к элементам, которые находятся ниже в потоке HTML из script выше, если вы не отложите свой код каким-либо образом (window.onload или "DOM загруженные" события, поддерживаемые многими библиотеками, например jQuery ready или Prototype dom:loaded).

Это означает, что типичная практика размещения тегов script в head фактически замедляет кажущееся время загрузки страницы, если только те теги script не должны появляться по какой-либо причине. Поэтому рекомендуется поставить их перед закрывающим тегом </body>.

Там есть "gotcha" , за которым вы должны следить: если у вас есть части страницы, на которые вы хотите отвечать JavaScript, если пользователь включил ее, загрузка вашего script в самом конце оставляет краткий но реальное состояние гонки лежит: пользователь может взаимодействовать со страницей, пока загружается ваш script. Существует множество способов решения этой проблемы. Моим любимым является определение того, включен ли JavaScript с встроенным script (а не отдельным файлом) в элементе head и, если это так, помещать обработчик уровня документа для вещей, где это возможно (вы можете сделать это с помощью click, например), который в основном задерживает или отключает клик в течение этого очень короткого периода времени. Таким образом, если JavaScript включен, вы избежите условия гонки, но если это не так, <резервное резервное копирование unobtrusive у вас есть место будет работать.

Ответ 3

Поместите их как функции в свой собственный .js файл, который вы включите <script src> в конец HTML <head> или <body>. Если какой-либо из них необходимо выполнить во время загрузки документа, вызовите его с помощью window.onload или любой другой функции загрузки, предлагаемой библиотекой/структурой JS, если вы используют любой.

Что касается точного местоположения, помещение их в конец <head> позволяет загружать их до того, как HTML-страница будет показана в браузере и помещена в конец <body>, чтобы страница была показана чуть раньше, потому что загрузка скриптов будет блокировать отображение страницы, таким образом, это улучшит скорость.

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

Ответ 4

Я бы поместил его в отдельный файл .js и обернул код, чтобы он выполнялся после загрузки DOM. Если вы используете фреймворк вроде jQuery или Prototype, это должно быть легко.

Ответ 5

Для лучшей производительности разместите свои файлы JavaScript на странице BOTTOM на странице HTML, которую вы обслуживаете.

Чтобы убедиться, что все установлено, когда вы пытаетесь его использовать, выполняйте только после того, как DOM готов (есть несколько вариантов этого, мой совет: используйте библиотеку JavaScript).