Ответы:
Все скрипты должны быть загружены последними
Практически в каждом случае лучше всего размещать все ссылки на сценарии в конце страницы, непосредственно перед этим </body>.
Если вы не можете сделать это из-за проблем с шаблонами и тому подобного, украсьте свои теги сценария deferатрибутом, чтобы браузер знал, что нужно загружать ваши сценарии после загрузки HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>Краевые случаи
Есть некоторые крайние случаи, однако, где вы можете испытать страницу мерцание или другие артефакты во время загрузки страницы , которые , как правило , могут быть решены путем простого размещения ваших ссылок скрипта JQuery в <head>теге без в deferатрибуте. Эти случаи включают пользовательский интерфейс jQuery и другие дополнения, такие как jCarousel или Treeview, которые изменяют DOM как часть их функциональности.
Дальнейшие предостережения
Есть некоторые библиотеки, которые должны быть загружены до DOM или CSS, такие как polyfills. Modernizr - одна из таких библиотек, которая должна быть помещена в тег head .
<head>. Если ваша разметка зависит от того, как плагин jQuery сортирует контент для вас, нет смысла помещать ссылку на плагин внизу страницы, так как вы будете получать фанки разметки на своей веб-странице до загрузки плагинов. Правила должны соблюдаться до тех пор, пока они не перестанут работать, и в этот момент правила должны быть нарушены.
Проблема, вызванная сценариями, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP / 1.1 предполагает, что браузеры загружают не более двух компонентов параллельно для каждого имени хоста. Если вы обслуживаете свои изображения с нескольких имен хостов, вы можете получить более двух загрузок параллельно. Однако во время загрузки скрипта браузер не будет запускать другие загрузки, даже на разных именах хостов. В некоторых ситуациях нелегко переместить сценарии в конец. Если, например, сценарий использует document.write для вставки части содержимого страницы, его нельзя переместить ниже на странице. Также могут быть проблемы с областями видимости. Во многих случаях есть способы обойти эти ситуации.
Альтернативное предложение, которое часто возникает, - использовать отложенные сценарии. Атрибут DEFER указывает, что сценарий не содержит document.write, и является подсказкой для браузеров, что они могут продолжить рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer сценарий может быть отложен, но не настолько, как хотелось бы. Если сценарий можно отложить, его также можно переместить в нижнюю часть страницы. Это заставит ваши веб-страницы загружаться быстрее.
РЕДАКТИРОВАТЬ: Firefox поддерживает атрибут DEFER начиная с версии 3.6.
Источники:
Загружайте только jQuery в голову, конечно через CDN.
Зачем? В некоторых сценариях вы можете включить частичный шаблон (например, фрагмент формы входа в систему ajax) со встроенным jQuery-зависимым кодом; если jQuery загружен внизу страницы, вы получите сообщение об ошибке «$ не определено», хорошо.
Конечно, есть способы обойти это (например, не встраивать JS и не добавлять в js-пакет load-at-bottom), но зачем терять свободную загрузку js возможности размещать зависимый от jQuery код где угодно ? Движок Javascript не заботится о том, где находится код в DOM, при условии что выполняются зависимости (например, загружается jQuery).
Для ваших общих / общих js-файлов, да, разместите их раньше </body>, но для исключений, где на самом деле имеет смысл просто поддержать приложение, чтобы вставить зависимый фрагмент jQuery или ссылку на файл прямо в тот момент в html, сделайте это.
Нет никакой производительности, загружающей jquery в голову; в каком браузере на планете уже нет jQuery CDN файла в кеше?
Много шума из ничего, воткните в голову jQuery и пусть ваша свобода царит.
2%, скажем, половина уйдет до первой загрузки страницы. Таким образом, вы теряете 1%посетителей, но потенциально экономите много времени и усилий на разработке. Посмотрите, имеет ли это смысл в вашей бизнес-модели ...
Nimbuz дает очень хорошее объяснение этой проблемы, но я думаю, что окончательный ответ зависит от вашей страницы: что важнее для пользователя - сценарии или изображения?
Есть некоторые страницы, которые не имеют смысла без изображений, но имеют только второстепенные, несущественные сценарии. В этом случае имеет смысл поместить сценарии внизу, чтобы пользователь мог быстрее увидеть изображения и начать понимать смысл страницы. Другие страницы полагаются на работу сценариев. В этом случае лучше иметь рабочую страницу без изображений, чем нерабочую страницу с изображениями, поэтому имеет смысл поместить сценарии вверху.
Еще одна вещь, которую следует учитывать, это то, что скрипты обычно меньше изображений. Конечно, это обобщение, и вы должны посмотреть, относится ли оно к вашей странице. Если это произойдет, то для меня это будет аргумент для того, чтобы поставить их на первое место как практическое правило (т. Е. Если нет веской причины поступать иначе), потому что они не будут задерживать изображения настолько, насколько изображения будут задерживать сценарии. Наконец, намного проще иметь скрипт наверху, потому что вам не нужно беспокоиться о том, загружены ли они, когда вам нужно их использовать.
Подводя итог, я склоняюсь к тому, чтобы по умолчанию ставить скрипты вверху и рассматривать только то, стоит ли перемещать их вниз, после завершения страницы. Это оптимизация - и я не хочу делать это преждевременно.
Большая часть кода jquery выполняется при готовности документа, что в любом случае не происходит до конца страницы. Кроме того, рендеринг страницы может быть задержан из-за синтаксического анализа / выполнения javascript, поэтому рекомендуется размещать весь javascript внизу страницы.
Стандартная практика - поместить все ваши скрипты внизу страницы, но я использую ASP.NET MVC с несколькими плагинами jQuery, и я считаю, что все это работает лучше, если я помещаю свои скрипты jQuery в <head>раздел мастера. стр.
В моем случае, при загрузке страницы возникают артефакты, если скрипты находятся внизу страницы. Я использую плагин jQuery TreeView, и если скрипты не загружаются в начале, дерево будет отображаться без необходимых CSS-классов, навязанных ему плагином. Таким образом, вы получаете этот смешной вид беспорядка при первой загрузке страницы, после чего следует правильное отображение TreeView. Очень плохо выглядит. Размещение плагинов jQuery в <head>разделе главной страницы устраняет эту проблему.
@Html.Action, который динамически записывает результат в вывод, так как мой $ is undefinedпартиал дает значение, вместо этого я должен использовать .load ('@ Url.Action'), чтобы загрузить партиал. Но это дает фуку из-за дополнительного запроса. Исходя из вашего вклада, я просто перенесу jquery над RenderBody () на моей главной странице
Хотя почти все веб-сайты по-прежнему размещают Jquery и другой javascript в заголовке: D, даже проверьте stackoverflow.com.
Я также предлагаю вам надеть до конца тег тела. Вы можете проверить время загрузки после размещения в любом месте. Тег Script приостановит загрузку вашей веб-страницы.
и после размещения javascript в нижнем колонтитуле вы можете получить необычный вид вашей веб-страницы, пока она не загрузит javascript, поэтому поместите css в раздел заголовка.
Непосредственно перед тем </body>лучшее место в соответствии с Yahoo Developer Network «s Best Practices для ускорения вашего веб - сайта по ссылке , это имеет смысл.
Лучше всего сделать это самостоятельно.
Для меня JQuery немного особенным. Возможно исключение из нормы. Есть так много других скриптов, которые полагаются на него, поэтому очень важно, чтобы он загружался раньше, чтобы другие скрипты, которые приходят позже, работали как задумано. Как заметил кто-то еще, даже эта страница загружает jQuery в раздел head.