Где я должен поместить <script>теги в разметке HTML? - PullRequest
Новая
       49

Где я должен поместить <script>теги в разметке HTML?

1325 голосов
/ 12 января 2009

При встраивании JavaScript в документ HTML, где лучше разместить теги <script> и включенный JavaScript? Кажется, я вспоминаю, что вы не должны помещать их в раздел <head>, но размещение в начале раздела <body> тоже плохо, так как JavaScript должен быть проанализирован до полной визуализации страницы ( или что-то типа того). Похоже, что end раздела <body> остается логическим местом для тегов <script>.

Итак, где это правильное место для размещения тегов <script>?

(Этот вопрос ссылается на этот вопрос , в котором было предложено переместить вызовы функций JavaScript из тегов <a> в теги <script>. Я специально использую jQuery, но более общие ответы тоже уместны.)

Ответы [ 20 ]

1 голос
/ 27 ноября 2017

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

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

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

1 голос
/ 27 января 2017

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

1 голос
/ 01 декабря 2016

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

1 голос
/ 20 января 2016

  • Если вы все еще заботитесь о поддержке и производительности в IE <10, лучше ВСЕГДА сделать так, чтобы ваш скрипт помечал последние теги вашего HTML-тела. Таким образом, вы уверены, что остальная часть DOM была загружена, и вы не будете блокировать и рендеринг. </p>

  • Если вас больше не волнует IE <10, вы можете поместить свои скрипты в заголовок документа и использовать <code>defer, чтобы они работали только после загрузки DOM ( <script type="text/javascript" src="path/to/script1.js" defer></script>). Если вы все еще хотите, чтобы ваш код работал в IE <10, не забудьте обернуть ваш код даже в <code>window.onload, хотя!

1 голос
/ 29 июня 2015

Скрипт блокирует загрузку DOM, пока он не загружен и не выполнен.

Если вы поместите сценарии в конце <body>, все DOM смогут загрузить и визуализировать (страница будет «отображаться» быстрее). <script> будет иметь доступ ко всем этим элементам DOM.

С другой стороны, размещение его после <body> start или выше запустит скрипт (там, где до сих пор нет элементов DOM).

Вы включаете jQuery, что означает, что вы можете разместить его где угодно и использовать .ready ()

1 голос
/ 18 ноября 2013

Зависит от того, что если вы загружаете скрипт, необходимый для стилизации вашей страницы / используя действия на вашей странице (например, нажатие кнопки), то вам лучше разместить его сверху. Если ваш стиль на 100% CSS и у вас есть все запасные варианты для действий кнопок, вы можете поместить его внизу.

Или, что лучше (если это не проблема), вы можете создать модальное окно загрузки, поместить свой javascript внизу страницы и заставить его исчезнуть, когда будет загружена последняя строка вашего скрипта. Таким образом, вы можете избежать использования пользователями действий на вашей странице до загрузки скриптов. А также избегайте неправильной укладки.

0 голосов
/ 09 ноября 2017

В конце HTML-документа

Так что это не повлияет на загрузку HTML-документа в браузере во время выполнения.

0 голосов
/ 28 октября 2017

лучшее место для написания кода JavaScript в конце кода документа после тега, чтобы загрузить документ, а затем выполнить код js. и если ты пишешь JQuery код пиши 

$(document).ready(function(){

//your code here...

});
0 голосов
/ 27 декабря 2013

Вы можете разместить там, где вам нужны сценарии, и один не лучше, чем другой.

ситуация выглядит следующим образом:

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

выявление передовой практики не зависит от того, где.

, чтобы поддержать вас, я упомяну следующее:

Вы можете разместить:

и страница будет загружаться линейно

страница загружается асинхронно с другим контентом

содержимое страницы будет загружено до и после загрузки скриптов загружено

Хорошая практика здесь будет, когда будет реализована каждая?

Надеюсь, я помог, что-нибудь, просто ответьте мне на этот вопрос.

0 голосов
/ 29 декабря 2012

Для меня имеет смысл включать скрипт после HTML. Потому что большую часть времени мне нужно загрузить Dom, прежде чем я выполню свой скрипт. Я мог бы поместить его в тег head, но мне не нравятся все издержки прослушивателя загрузки документов. Я хочу, чтобы мой код был коротким, приятным и легким для чтения.

Я слышал, что старые версии сафари были странными при добавлении вашего скрипта вне тега head, но я говорю, кого это волнует Я не знаю никого, кто использовал эту старую чушь, не так ли?

Хороший вопрос, кстати.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...