Я возился с html5, я никогда не разбирался в JavaScript раньше. Я ссылаюсь на файл script вроде этого (не в голове)
<script src="somthing.js"></script>
Однако script работает только в том случае, если он помещен ниже определенных элементов на странице.
Существуют ли особые ситуации, когда важно разместить javascript?
Спасибо заранее.
Если script не ждет событие onload или "готово" какого-либо типа, оно должно быть размещено после элементов, которые он ссылается (иначе их не будет найдено). Если вы не уверены, придерживайтесь его перед </body>.
В этом случае это похоже на то, что происходит, и ищет элементы, которые еще не добавлены в DOM. Размещение script в нижней части <body> является обычной практикой для борьбы с этим. Некоторые альтернативы используют событие window.onload для запуска вашего кода, например jQuery $(document).ready() (большинство основных библиотек имеют некоторый эквивалент этого).
Лучшая практика в соответствии с Правилами эффективности Yahoo заключается в размещении скриптов в нижней части страницы:
Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 предполагает, что браузеры загружают не более двух компонентов параллельно по имени узла. Если вы обслуживаете свои изображения из нескольких имен хостов, вы можете получить более двух загрузок, которые будут происходить параллельно. Однако при загрузке script браузер не запускает никаких других загрузок даже на разных именах хостов.
В некоторых ситуациях нелегко перемещать скрипты на дно. Если, например, script использует document.write для вставки части содержимого страницы, его нельзя перемещать ниже на странице. Могут также возникать проблемы с определением области охвата. Во многих случаях существуют способы обхода этих ситуаций.
Альтернативное предложение, которое часто возникает, заключается в использовании отложенных сценариев. Атрибут DEFER указывает, что script не содержит document.write и является ключом к браузерам, что они могут продолжать рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer script может быть отложен, но не так сильно, как хотелось бы. Если a script можно отложить, его также можно перенести в нижнюю часть страницы. Это ускорит загрузку ваших веб-страниц.
Хорошо, нам нужно было знать, что было в вашем script, чтобы сказать вам, но короткий ответ: "Да, это имеет значение".
Скрипты (по существу) выполняются при обнаружении браузером. Классическая ошибка заключается в том, чтобы сделать ссылку на элемент страницы в script, помещенный ранее в документе, чем элемент, который он ссылается, - когда выполняется script, элемент еще не существует!
Обычно считается, что держать скрипты в голове, решение этой проблемы связано с тем, что для добавления функционального кода к onload обработчикам событий.
Бонусный раунд: вопрос размещения гораздо более тонкий script заключается в том, что большинство браузеров будут загружать однопоточные файлы, когда они сталкиваются с script (из соображений безопасности и потому, что script может модифицировать требования к загрузке, например), Это одна из причин, по которой yahoo рекомендует размещать сценарии в вашем документе, но это противоречивая вещь, которую можно сделать только для тонкого преимущества восприятия.
Если ваш script действует на элемент, он должен быть размещен после этого элемента на странице или настроен для выполнения при завершении загрузки страницы. Если script выполняется до того, как элемент был добавлен в DOM (что происходит, когда он встречается, когда браузер анализирует страницу), тогда script не может найти элемент, по которому вы хотите действовать. Размещение script после того, как элемент обеспечит доступность элемента для его работы. Аналогично, заставляя его запускать после загрузки всей страницы, убедитесь, что все элементы доступны для script.
Я бы предположил, что, насколько это возможно, вы загружаете свои скрипты прямо перед закрывающим тегом </body>. Я бы также посмотрел на использование фреймворка, например jQuery, что упрощает запуск ваших сценариев при загрузке страницы и завершение кода внутри этого события загрузки.
ДА, он делает.
например, просто скажем, что ваш код js находится наверху. и он интерпретируется до того, как браузер выполнит настройку раздела дерева dom... в этом случае элемент HTML, на который вы ссылаетесь, если он указан до его доступности, приведет к ошибке, заявив, что элемент undefined.
Другая причина - это опыт пользователя. Если css находится наверху, когда отображается html, все выглядит хорошо, но если js не находится внизу, вам придется ждать, пока он будет загружен и будет готов к выполнению до того, как остальная часть будет визуализирована; поэтому, замедляя скорость отображения элементов на экране.
Я вижу это много. Различные штрихи для разных браузеров, но просто поместите js внизу, а css наверху, и вам не нужно беспокоиться о таких вещах.
Это зависит от того, для чего предназначен script. Если он использует метод document.write(), то имеет значение, где он находится на странице. Если он пытается ссылаться на элементы в DOM, он лучше всего помещается в HEAD и имеет те функции, которые получают доступ к элементам DOM, запускаемым после загрузки страницы.
Существует несколько сценариев, в которых важно размещение.
foo() в your_script.js, и вы вызываете его перед тем, как включить your_script.js, чем он просто не будет работать, потому что foo() еще не определен.Итак, в основном... во многом зависит от того, какие скрипты вы используете. Иногда это имеет значение, иногда это не так.
Это не только то, где script помещается на страницу, но также и когда выполняется код в script.
Теги Script обычно идут в разделе head страницы. Однако это означает, что ни один элемент не загружается при загрузке кода, и если он выполняется немедленно, вы не можете получить доступ к каким-либо элементам. Решением этого является использование события onload на странице. Пример:
<html>
<head>
<title></title>
<script>
function init() {
document.getElementById('message').innerHTML = 'Hello world!';
}
</script>
</head>
<body onload="init();">
<div id="message"></id>
</body>
</html>
В библиотеках Javascript могут быть другие методы выполнения чего-то аналогичного, например, события ready в jQuery.
Вы можете размещать скрипты на странице (хотя это не то, что рекомендуется стандартом HTML), но если вам нужно получить доступ к элементам на странице из кода, который запускается немедленно, script должен быть загружен после того, как элементы, Пример:
<html>
<head>
<title></title>
</head>
<body>
<div id="message"></id>
<script>
document.getElementById('message').innerHTML = 'Hello world!';
</script>
</body>
</html>
Сценарии также могут быть помещены на поздней странице по причинам производительности. Вы можете помнить об этом и сохранять его до тех пор, пока у вас не будет никаких проблем с производительностью.
Yahoo фактически рекомендует разместить ваши сценарии внизу. Загрузка JS файла - это блокирующее действие, которое означает, что в это время ничего не загружается (например, images/css). Поставив ваши сценарии внизу, пользователь сначала получает html/images/css и фактически видит страницу быстрее, и ваши JS загружаются после добавления интерактивности.
Сказав, что, как упоминают другие сообщения, ваш script должен ждать, пока dom будет готов, прежде чем делать что-либо DOM, иначе вы будете иметь разнообразное поведение в зависимости от того, когда DOM готов.
Хорошо, вот что я думаю.
Если вам нужно выполнить свой script, прежде чем HTML начнет рендеринг в браузере клиентов, лучше будет поместить его в раздел <head>.
И если вы выполняете код JavaScript, который каким-то образом обменивается данными с каким-либо элементом, то за этим элементом следует поместить script, потому что если script запускается вперед, то он не может найти свой соответствующий элемент для связи с. Поэтому лучше поместить элемент за пределы.
Простыми словами: убедитесь, что элементы доступа script загружены до запуска script. Конечно, если вы не уверены, поставьте его перед этим.
Ваш script, вероятно, попытается работать с DOM, прежде чем он будет готов. Это не должно быть решено, перемещая его, а скорее, откладывая выполнение с domready обратными вызовами.
После сортировки вы должны стремиться сохранить script внутри head. Раньше обычно было включать скрипты в нижней части страницы, чтобы избежать блокировки страниц и запросов. В HTML5 такое влияние производительности больше не имеет значения, поскольку вы можете использовать атрибут async. Он позволяет загружать файлы JS без побочных эффектов:
Традиционные сценарии блокируют парсер HTML, предотвращая показ остальной части страницы до тех пор, пока script не будет загружен и запущен. Скрипты, использующие асинхронный HTML5, разблокируют остальную часть страницы, чтобы она могла продолжить загрузку, пока загружается script. ^