Должен ли JavaScript быть в заголовках тегов?
Я считаю, что JavaScript может быть где угодно (почти), но я почти всегда вижу его между <head></head>, Я использую jquery и хотел узнать, должно ли оно быть в тегах head по какой-то причине или сломается ли что-нибудь, если я переместу его. Спасибо.
РЕДАКТИРОВАТЬ: Почему это почти всегда в заголовках тегов?
11 ответов
JavaScript выполняется везде, где он найден в документе. Если вы поместите встроенный JavaScript в тело, он будет выполнен, когда браузер перейдет к нему. Если вы используете $(document).ready(...) чтобы выполнить вещи, то расположение не должно иметь значения. В противном случае вы можете найти угловой случай, когда это имеет значение. В общем, это не важно. Скрипты заканчиваются в head тег в основном вне традиции.
Нет, это может быть где угодно. На самом деле, иногда полезно поместить его в конец документа. Для объяснения почему см. http://developer.yahoo.com/performance/rules.html.
По сути, браузеры перестают отображать страницу до .js файлы полностью загружены и обработаны. Так как они визуализируют страницу по мере поступления HTML, позже .js ссылки на файлы, тем лучше будет пользовательский опыт.
Так что хитрость заключается в том, чтобы включать в headи загрузите оставшиеся к концу страницы.
Все останавливается, когда браузер читает тег сценария, пока не обработает его. Поэтому ваша страница будет отображаться быстрее, если вы переместите теги скрипта как можно ниже - в идеале, непосредственно перед тегом конца тела. Очевидно, что общее время загрузки будет таким же.
Вы должны будете убедиться, что вы на самом деле не вызываете никакие функции jQuery, пока, конечно, jQuery не будет включен.
И именно поэтому JavaScript находится в таком беспорядке и почему старые сообщения Stackru являются худшим кошмаром для разработчиков. В эти дни JS меняется так быстро, что каждую неделю выходит новая концепция, и ее сторонники утверждают, что каждая из них - это колени пчел.
Гамбо прав, говоря, что на тег скрипта можно ссылаться везде, где может быть встроенный элемент, но выбор загрузки внешнего файла JS или включения кода JS в тег - это решение, принимаемое индивидуально для каждого случая. Да, браузер перестанет загружать JS при синтаксическом анализе, и поэтому вам нужно подумать, как это повлияет на скорость загрузки страницы и ее функциональность. Текущий или по состоянию на год назад, середина 2015 года (имейте в виду, что популярный ответ был в июле 2009 года, и большинство разработчиков никогда не будут читать его, когда смотрят на ответ № 1 и двигаются дальше!!!), это мобильный телефон. Приоритет скорости загрузки страницы требует ограничения в два запроса для мачты мобильной / сотовой связи, что при 3G дает вам полезную нагрузку 28 КБ (2x 14 КБ (да)), вы должны учитывать (как Google называет это) "рисование на экран" в 28 КБ и это должно предоставить пользователю достаточно содержимого страницы / интерактивности, чтобы гарантировать, что они находятся на правильной странице или на правильном пути, в этих 28 тысячах. Таким образом, Jquery minified в настоящее время 87.6lkb, просто не собираюсь резать горчицу!
Вот почему большинство мобильных страниц загружаются на несколько секунд, прежде чем загружать что-либо, и это 4G! Не делай этого. Скорость страницы важна, и пользователи нажимают кнопку "Назад" до того, как загружается ваш файл JQuery. При 3G+ полезная нагрузка 28 Кб будет загружаться в течение <1 с, поэтому нет причин, по которым ваша страница не начинает загружаться в это время. В следующий раз, когда вы нажмете ссылку на своем телефоне, посмотрите, как сидит маленькая полоска, и подождите, пока она пройдет через все теги на следующей странице!
Так что структурируйте свою страницу не по тому, где говорится в 7-летнем посте на SO (это не просто неправильно, просто устарело), а там, где нужен каждый фрагмент кода, и убедитесь, что пользователь может использовать самые важные аспекты страницы, прежде чем пытаться загрузить 6 платформ JS для реализации умных параллельных прокруток и обширного связывания данных для вашей страницы контактов.
Кстати, Google просит вас подтолкнуть JS ко дну, потому что они предоставляют аналитический код Google, и это должно быть самое последнее, что нужно загрузить.
Подумайте, прежде чем код!
Нет. SCRIPT классифицируется не только как элемент head.misc, но также как специальный элемент и, следовательно, везде разрешен, где допускаются встроенные элементы. Таким образом, вы можете положить SCRIPT везде, где допускаются встроенные элементы:
<p>foo <script>document.write("bar")</script></p>
На самом деле, некоторые рекомендуют ставить SCRIPT элементы в конце BODY непосредственно перед закрывающим тегом, так что весь документ анализируется перед загрузкой JavaScript. Это делается для того, чтобы JavaScript не блокировал параллельные загрузки.
Просто будьте осторожны с тем, какое отрицательное влияние на задержку вы можете оказать, в зависимости от браузера пользователя и того, где именно вы размещаете свой Javascript на странице - посмотрите почти все, что Стив Соудерс должен сказать, включая видео его лекций в Стэнфорде, и плоды его труда остались позади, например, здесь (поместите сценарии внизу страницы настолько, насколько это возможно, и т. д. и т. д.).
На самом деле, из соображений производительности, вы почти всегда хотите разместить теги сценариев внизу страницы. Зачем? Вы хотите, чтобы ваша структура страницы и ваш CSS загружались первыми, чтобы пользователь сразу увидел страницу. Затем вы хотите, чтобы весь ваш код, управляемый поведением, загружался последним. YSlow - это хорошее расширение для Firefox, которое покажет вам оценку за производительность. Одним из пунктов, по которому он оценивает вас, является наличие у вас JavaScript внизу, а не сверху.
Потому что вы не хотите, чтобы JavaScript смешивался с HTML - контент с поведением. Желательно, чтобы вы хотели это в отдельном файле.
Наличие JS в другом месте имеет свои преимущества и недостатки - например, оно будет выполнено в разное время, и вы можете писать в документ из javascript, расположенного в теле.
В некоторых случаях, да, скрипт может не работать, если он находится не в том месте. Некоторые JavaScript должны выполняться после определенного HTML-элемента, другие должны быть именно там, где вы хотите, чтобы вывод вашего скрипта отображался, другие должны быть в заголовке документа. Это действительно зависит от того, как написан код. Если вы не уверены, вы должны выполнить свой код в window.load или DOMready: http://www.javascriptkit.com/dhtmltutors/domready.shtml
Это может пойти в head или же body тег. Просто имейте в виду, что он будет выполняться всякий раз, когда читается, и не обязательно после окончания загрузки документа. Посмотрите здесь.