Должен ли JavaScript быть в заголовках тегов? - PullRequest
Новая
       52

Должен ли JavaScript быть в заголовках тегов?

63 голосов
/ 31 июля 2009

Я считаю, что javascript может быть где угодно (почти), но я почти всегда вижу его между <head></head>. Я использую jquery и хотел знать, должно ли оно быть в тегах head по какой-то причине или что-то сломается, если я его переместу Спасибо.

РЕДАКТИРОВАТЬ: Почему это почти всегда в заголовках тегов?

Ответы [ 11 ]

45 голосов
/ 31 июля 2009

Нет, это может быть где угодно. На самом деле иногда полезно поместить его в конец документа. Для объяснения почему см. http://developer.yahoo.com/performance/rules.html#js_bottom.

38 голосов
/ 31 июля 2009

JavaScript выполняется везде, где он найден в документе. Если вы поместите встроенный JavaScript в тело, он будет выполнен, когда браузер перейдет к нему. Если вы используете $(document).ready(...) для выполнения задач, то расположение не должно иметь значения. В противном случае вы можете найти угловой случай, когда это имеет значение. В общем, это не важно. Скрипты заканчиваются в теге head в основном вне традиции.

16 голосов
/ 31 июля 2009

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

Таким образом, хитрость заключается в том, чтобы включать в head только абсолютно важные сценарии и загружать оставшиеся в конец страницы.

9 голосов
/ 11 ноября 2016

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

Гамбо прав, говоря, что на тег скрипта можно ссылаться везде, где поддерживается встроенный элемент, но выбор загрузки внешнего файла JS или включения кода JS в тег - это решение, принимаемое индивидуально в каждом конкретном случае. ,

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

По состоянию на середину 2015 года (популярный ответ был в июле 2009 года), для предоставления мобильного приоритета скорости загрузки страницы требуется ограничение в два запроса для мобильной / сотовой мачты, что при 3G дает вам 28 КБ (2 x 14 КБ (да)) полезная нагрузка. Вы должны рассмотреть «рисовать на экран» (как Google называет это) из 28k. Это должно предоставить пользователю достаточно содержимого страницы / интерактивности, чтобы убедиться, что они находятся на правильной странице или правильном пути. Jquery minified в настоящее время составляет 87.6lkb, так что «просто не собираюсь резать горчицу!»

Именно поэтому большинство мобильных страниц сидят в течение нескольких секунд, прежде чем загружать что-либо, даже на 4G! Не позволяй этого. Скорость страницы важна, и пользователи нажимают кнопку «Назад» до загрузки файла JQuery. В 3G + полезная нагрузка в 28 Кб будет загружаться в течение <1 с, поэтому нет причин, по которым ваша страница не должна начать загружаться в это время. В следующий раз, когда вы нажмете ссылку на своем телефоне, посмотрите, как загружается панель загрузки, и подождите, пока она пройдет через все теги на следующей странице! </strong>

Не структурируйте свою страницу на основе 7-летних сообщений на SO (даже если это не так, просто устарели). Решите, где требуется каждый фрагмент кода, и убедитесь, что пользователь может использовать самые важные аспекты страницы, прежде чем пытаться загрузить 6 JS-сред, которые реализуют экстравагантные визуальные функции и обширную привязку данных для вашей страницы.

Кстати, Google предпочитает, чтобы вы толкали JS вниз, потому что код аналитики Google должен загружаться последним.

Подумайте, прежде чем код!

9 голосов
/ 31 июля 2009

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

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

5 голосов
/ 31 июля 2009

Нет. SCRIPT классифицируется не только как head.misc элемент , но также как специальный элемент и, таким образом, везде разрешено где встроенные элементы разрешены. Таким образом, вы можете поместить SCRIPT везде, где допустимы встроенные элементы: 

<p>foo <script>document.write("bar")</script></p>

Фактически, некоторые рекомендуют помещать элементы SCRIPT в конце BODY непосредственно перед закрывающим тегом, чтобы весь документ анализировался перед загрузкой JavaScript. Это означает, что JavaScript не должен блокировать параллельные загрузки.

2 голосов
/ 31 июля 2009

Просто будьте осторожны с тем, какое отрицательное влияние на задержку вы можете оказать, в зависимости от браузера пользователя и того, где именно вы размещаете свой Javascript на странице - посмотрите почти все, что Стив Соудерс должен сказать включая видео его лекций в Стэнфорде и плоды его трудов, оставленных, например, здесь (поместите скрипты внизу страницы , насколько это возможно, и т. Д. И т. Д.).

2 голосов
/ 31 июля 2009

На самом деле, по соображениям производительности, вы почти всегда хотите разместить теги сценариев внизу страницы. Зачем? Вы хотите, чтобы ваша структура страницы и ваш CSS загружались первыми, чтобы пользователь сразу увидел страницу. Затем вы хотите, чтобы весь ваш код, управляемый поведением, загружался последним. YSlow - это хорошее расширение для Firefox, которое покажет вам оценку за производительность. Одним из пунктов, по которому он оценивает вас, является наличие у вас javascript внизу, а не сверху.

1 голос
/ 31 июля 2009

  1. Потому что вы не хотите, чтобы JavaScript смешивался с HTML - контент с поведением. Желательно в отдельном файле.

  2. Наличие JS в другом месте имеет свои преимущества и недостатки - например, оно будет выполнено в разное время, и вы можете писать в документ из javascript, расположенного в теле.

0 голосов
/ 31 июля 2009

В некоторых случаях да, скрипт может не работать, если он находится не в том месте. Некоторые JavaScript должны выполняться после определенного HTML-элемента, другие должны быть именно там, где вы хотите, чтобы ваш вывод скрипта отображался, другие должны быть в заголовке документа. Это действительно зависит от того, как написан код. Если вы не уверены, вы должны выполнить свой код в window.load или DOMready: http://www.javascriptkit.com/dhtmltutors/domready.shtml

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

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

...