Я видел оба способа, обе реализации выполняют только структуры немного разные. По вашему опыту, который лучше работает и почему?
Должен ли я писать script в теле или в заголовке html?
Ответ 1
Я бы ответил на это несколькими вариантами на самом деле, некоторые из которых фактически отображают в теле.
- Поместите библиотеку script, такую как библиотека jQuery в разделе главы.
- Поместите обычный script в голову, если это не проблема с загрузкой/загрузкой страницы.
- Место script, связанное с включенными, в пределах и в конце этого include. Одним из примеров этого является пользовательский контроль .ascx на страницах asp.net - поместите script в конце этой разметки.
- Поместите script, который влияет на рендеринг страницы в конце тела (до закрытия тела).
- НЕ помещайте script в разметку, такую как
<input onclick="myfunction()"/>- лучше разместить ее в обработчиках событий в вашем теле script. - Если вы не можете решить, поместите его в голову до тех пор, пока у вас не возникнет причина не касаться проблем с блокировкой страницы.
Сноска: "Когда вам это нужно, а не раньше" применяется к последнему элементу при блокировке страницы (скорость перцептивной загрузки) - восприятие пользователями - это реальность, если она быстрее загружается, она загружается быстрее (хотя все еще может происходить в коде).
EDIT: ссылки:
- Обсуждение asp.net: http://west-wind.com/weblog/posts/154797.aspx и здесь: http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
- обсуждение jQuery документа: http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
- другие ответы по этому вопросу также содержат достоверную информацию.
- используйте www.google.com и www.bing.com для поиска соответствующей информации (есть много ссылок).
Боковое примечание: Если вы поместите блоки 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 (который также входит в заголовок).