Должен ли код Jquery идти в верхний или нижний колонтитул?


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

9 172

9 ответов:

все скрипты должны быть загружены последние

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

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

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

края дела

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


далее предостережения

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

поместите Скрипты в нижней части

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

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

EDIT: Firefox поддерживает атрибут DEFER начиная с версии 3.6.

источники:

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

почему? В некоторых сценариях вы можете включить частичный шаблон (например, фрагмент формы входа ajax) со встроенным зависимым кодом jQuery; если jQuery загружен внизу страницы, вы получаете ошибку "$ не определен", nice.

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

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

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

много шума из ничего, вставьте jQuery в голову и пусть ваша свобода JS царит.

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

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

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

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

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

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

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

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

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

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

перед </body> Это лучшее место в соответствии с этой ссылке, это имеет смысл.

лучшее, что можно сделать, это проверить самостоятельно.

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