Должен ли код JQuery идти в верхнем или нижнем колонтитуле?

Где лучше всего разместить JQuery-код (или отдельный файл Jquery)? Будут ли страницы загружаться быстрее, если я поместил их в нижний колонтитул?

Ответ 1

Все сценарии должны быть загружены последними

В каждом случае лучше всего разместить все ваши ссылки script в конце страницы, перед </body>.

Если вы не можете сделать это из-за проблем с шаблонами и еще чего-то, украсьте теги script атрибутом defer, чтобы браузеру удалось скачать ваши скрипты после загрузки HTML:

<script src="my.js" type="text/javascript" defer="defer"></script>

Граничные случаи

Однако есть некоторые граничные ситуации, когда вы можете столкнуться с миганием страницы или другими артефактами во время загрузки страницы, что обычно можно решить, просто разместив ссылки jQuery script в теге <head> без атрибута defer. Эти случаи включают jQuery UI и другие дополнения, такие как jCarousel или Treeview, которые изменяют DOM как часть их функциональных возможностей.

Дальнейшие оговорки

Есть некоторые библиотеки, которые должны быть загружены перед DOM или CSS, например, polyfills. Modernizr - это одна из таких библиотек, которая должна быть помещена в заголовок.

Ответ 2

Поместите сценарии внизу

Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 предполагает, что браузеры загружают не более двух компонентов параллельно для каждого имени хоста. Если вы обслуживаете свои изображения с нескольких имен хостов, вы можете получить более двух загрузок параллельно. Однако во время загрузки скрипта браузер не будет запускать другие загрузки, даже на разных именах хостов. В некоторых ситуациях нелегко переместить сценарии в конец. Если, например, сценарий использует document.write для вставки части содержимого страницы, его нельзя переместить ниже на странице. Также могут быть проблемы с областями видимости. Во многих случаях есть способы обойти эти ситуации.

Альтернативное предложение, которое часто возникает, - использовать отложенные сценарии. Атрибут DEFER указывает, что сценарий не содержит document.write и является подсказкой для браузеров, что они могут продолжить рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer сценарий может быть отложен, но не настолько, как хотелось бы. Если скрипт можно отложить, его также можно переместить в нижнюю часть страницы. Это заставит ваши веб-страницы загружаться быстрее.

РЕДАКТИРОВАТЬ: Firefox поддерживает атрибут DEFER начиная с версии 3.6.

Источники:

http://www.w3schools.com/tags/att_script_defer.asp или лучше:
http://caniuse.com/#feat=script-defer

Ответ 3

Загружайте только сам jQuery в голову, через CDN, конечно.

Почему? В некоторых сценариях вы можете включить частичный шаблон (например, ajax login form snippet) со встроенным jQuery-зависимым кодом; если jQuery загружается на странице внизу, вы получаете ошибку "$ is not defined", хорошо.

Есть способы обойти это, конечно, (например, не встраивать какие-либо JS и добавлять к js-пакету load-at-bottom js), но зачем потерять свободу лениво загруженных js, возможность разместить jQuery-зависимый код в любом месте Вы, пожалуйста? Механизму Javascript все равно, где код живет в DOM, если удовлетворяются зависимости (например, загружаемый jQuery).

Для ваших общих/общих js файлов, да, поместите их перед </body>, но за исключениями, где действительно просто разумно использовать приложение для поддержки привязки jQuery-зависимого фрагмента или ссылки на файл в тот момент в html, сделайте это.

В jQuery нет загрузки производительности при загрузке; какой браузер на планете еще не имеет jQuery CDN файла в кеше?

Много шума от ничего, вставьте jQuery в голову и дайте свободу вашей js.

Ответ 4

Nimbuz дает очень хорошее объяснение проблемы, но я думаю, что окончательный ответ зависит от вашей страницы: что более важно для пользователя раньше - сценарии или изображения?

Есть некоторые страницы, которые не имеют смысла без изображений, но имеют только незначительные, несущественные сценарии. В этом случае имеет смысл поставить сценарии внизу, чтобы пользователь мог быстрее увидеть изображения и начать понимать страницу. Другие страницы полагаются на скрипты для работы. В этом случае лучше иметь рабочую страницу без изображений, чем нерабочая страница с изображениями, поэтому имеет смысл разместить сценарии вверху.

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

В общем, я, как правило, ставил сценарии вверху по умолчанию и учитываю только то, стоит ли их перемещать вниз после завершения страницы. Это оптимизация - и я не хочу делать это преждевременно.

Ответ 5

Большинство jquery-кода выполняется на готовом документе, чего не происходит до конца страницы. Кроме того, рендеринг страниц может задерживаться обработкой/исполнением javascript, поэтому лучше всего разместить все javascript в нижней части страницы.

Ответ 6

Стандартная практика заключается в том, чтобы поместить все ваши скрипты в нижней части страницы, но я использую ASP.NET MVC с несколькими плагинами jQuery, и я считаю, что все это работает лучше, если я поместил сценарии jQuery в <head> главной страницы.

В моем случае есть артефакты, возникающие при загрузке страницы, если скрипты находятся внизу страницы. Я использую плагин jQuery TreeView, и если скрипты не загружаются в начале, дерево будет отображать без необходимых классов CSS, наложенных на него плагином. Таким образом, вы получаете этот забавный вид беспорядка, когда первая страница загружается, а затем правильная рендеринг TreeView. Очень плохо выглядящий. Включение плагинов jQuery в разделе <head> главной страницы устраняет эту проблему.

Ответ 7

Хотя почти все веб-сайты по-прежнему размещают Jquery и другие javascript в заголовке: D, даже проверяйте stackoverflow.com.

Я также предлагаю вам надеть до конца тег тела. Вы можете проверить время загрузки после размещения в любом месте. Тег Script приостанавливает загрузку вашей веб-страницы.

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

Ответ 8

Как раз перед тем, как </body> станет лучшим местом в соответствии с рекомендациями Yahoo Developer Network по ускорению работы вашего сайта, эта ссылка имеет смысл.

Лучше всего сделать это самостоятельно.

Ответ 9

Для меня jQuery немного особенный. Может быть, исключение из нормы. Есть так много других сценариев, которые полагаются на него, поэтому его очень важно, чтобы он загружался раньше, чтобы другие сценарии, которые приходят позже, будут работать по назначению. Как заметил кто-то другой, эта страница загружает jQuery в раздел главы.