Должен ли я писать script в теле или в заголовке html?

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

Ответы

Ответ 1

Я бы ответил на это несколькими вариантами на самом деле, некоторые из которых фактически отображают в теле.

  • Поместите библиотеку script, такую ​​как библиотека jQuery в разделе главы.
  • Поместите обычный script в голову, если это не проблема с загрузкой/загрузкой страницы.
  • Место script, связанное с включенными, в пределах и в конце этого include. Одним из примеров этого является пользовательский контроль .ascx на страницах asp.net - поместите script в конце этой разметки.
  • Поместите script, который влияет на рендеринг страницы в конце тела (до закрытия тела).
  • НЕ помещайте script в разметку, такую ​​как <input onclick="myfunction()"/> - лучше разместить ее в обработчиках событий в вашем теле script.
  • Если вы не можете решить, поместите его в голову до тех пор, пока у вас не возникнет причина не касаться проблем с блокировкой страницы.

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

EDIT: ссылки:

Боковое примечание: Если вы поместите блоки script в разметку, это может повлиять на макет в некоторых браузерах, заняв место (например, 7 и опера 9.2, как известно, имеют эту проблему), поэтому поместите их в скрытый div (используйте css класс: .hide { display: none; visibility: hidden; } на div)

Стандарты: обратите внимание, что стандарты позволяют размещать блоки script практически в любом месте, если это под вопросом: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html и http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

EDIT2: Обратите внимание, что, когда это возможно (всегда?), вы должны поместить фактический Javascript во внешние файлы и ссылаться на них - это не изменяет правильность последовательности.

Ответ 2

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

Некоторые из более современных браузеров нарушают это правило, не блокируя загрузку скриптов (т.е. первый был первым), но в целом загрузка - это не большая часть времени, затрачиваемого на блокирование.

Отъезд Даже более быстрые веб-сайты, я только что закончил читать его, и он просматривает все быстрые способы получения скриптов на странице, в том числе помещая скрипты в нижней части страницы, чтобы сделать рендеринг завершен (лучше UX).

Ответ 3

У W3Schools есть хорошая статья по этому вопросу.

Скрипты в <head>

Сценарии, которые должны выполняться, когда они или когда событие запускается, помещаются в функции.

Поместите свои функции в голову раздел, таким образом, они все в одном место, и они не мешают содержимого страницы.

Скрипты в <body>

Если вы не хотите, чтобы ваш script был помещается внутри функции, или если ваш script должен записывать содержимое страницы, оно следует размещать в секции кузова.

Ответ 4

Голова или перед закрытием тега тела. Когда DOM загружается, JS затем выполняется, это именно то, что делает jQuery document.ready.

Ответ 5

Я всегда ставил свои скрипты в заголовок. Мои причины:

  • Мне нравится разделять код и (статический) текст
  • Обычно я загружаю script из внешних источников
  • Тот же script используется с нескольких страниц, поэтому он похож на файл include (который также входит в заголовок).