Практически в каждом случае лучше всего размещать все ссылки на сценарии в конце страницы, непосредственно перед этим </body>.
Если вы не можете сделать это из-за проблем с шаблонами и тому подобного, украсьте свои теги сценария deferатрибутом, чтобы браузер знал, что нужно загружать ваши сценарии после загрузки HTML:
Есть некоторые крайние случаи, однако, где вы можете испытать страницу мерцание или другие артефакты во время загрузки страницы , которые , как правило , могут быть решены путем простого размещения ваших ссылок скрипта JQuery в <head>теге без в deferатрибуте. Эти случаи включают пользовательский интерфейс jQuery и другие дополнения, такие как jCarousel или Treeview, которые изменяют DOM как часть их функциональности.
Дальнейшие предостережения
Есть некоторые библиотеки, которые должны быть загружены до DOM или CSS, такие как polyfills. Modernizr - одна из таких библиотек, которая должна быть помещена в тег head .
Хорошо, рассмотрим это: themeforest.net/item/portfolious-professional-business-template/… . Это тема сайта, которую я недавно приобрел, которая показывает на своей домашней странице использование jQuery с jCarousel. Когда я переместил блоки скриптов из заголовка в конец файла, я заметил, что все изображения, используемые в карусели, будут отображаться сразу во время загрузки страницы, тогда как когда файлы скриптов находились в заголовке, страница загружалась более плавно.
Чад Леви
5
Используйте CSS, чтобы установить начальное состояние контента. CSS должен идти в голову. Разрушение чего-то, чтобы заставить что-то другое работать, не является решением. Если посетителю нужно дождаться загрузки jQuery и всех связанных плагинов, прежде чем какой-либо контент будет отображен, он может не задержаться на просмотре контента.
Дункан
9
ChadLevy прав: есть некоторые условия, при которых плагины jQuery работают лучше, если на них есть ссылки в <head>. Если ваша разметка зависит от того, как плагин jQuery сортирует контент для вас, нет смысла помещать ссылку на плагин внизу страницы, так как вы будете получать фанки разметки на своей веб-странице до загрузки плагинов. Правила должны соблюдаться до тех пор, пока они не перестанут работать, и в этот момент правила должны быть нарушены.
Роберт Харви
2
@Duncan: в идеале это будет тот случай, когда вы можете контролировать все зависимости. Особенность jQuery (точнее, jQuery UI и других надстроек) заключается в том, что вы не можете полностью контролировать их функциональность, поэтому добавить что-то вроде атрибутов видимости в элемент DOM, чтобы он загружался более изящно, невозможно, если аддон, который использует этот элемент, не будет учитывать указанный атрибут. Иногда лучше игнорировать простое соглашение, чем пытаться заставить зависимость работать так, как вы хотите.
Чад Леви
2
@Stefan: Если вашим плагинам jQuery не разрешено манипулировать DOM, то какой в этом смысл?
Проблема, вызванная сценариями, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP / 1.1 предполагает, что браузеры загружают не более двух компонентов параллельно для каждого имени хоста. Если вы обслуживаете свои изображения с нескольких имен хостов, вы можете получить более двух загрузок параллельно. Однако во время загрузки скрипта браузер не будет запускать другие загрузки, даже на разных именах хостов. В некоторых ситуациях нелегко переместить сценарии в конец. Если, например, сценарий использует document.write для вставки части содержимого страницы, его нельзя переместить ниже на странице. Также могут быть проблемы с областями видимости. Во многих случаях есть способы обойти эти ситуации.
Альтернативное предложение, которое часто возникает, - использовать отложенные сценарии. Атрибут DEFER указывает, что сценарий не содержит document.write, и является подсказкой для браузеров, что они могут продолжить рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer сценарий может быть отложен, но не настолько, как хотелось бы. Если сценарий можно отложить, его также можно переместить в нижнюю часть страницы. Это заставит ваши веб-страницы загружаться быстрее.
РЕДАКТИРОВАТЬ: Firefox поддерживает атрибут DEFER начиная с версии 3.6.
Я видел несколько современных советов, в которых говорится, что сценарии должны быть расположены вверху. Размещение сценариев внизу позволяет параллельно загружать изображения и другое содержимое в теле страницы, но фактически приводит к тому, что сценарии на странице загружаются позже - необходимо загрузить все тело HTML, прежде чем браузер узнает о URL скрипта для загрузки. Большинство людей ссылаются на руководство Yahoo, которое уже не является точным - Firefox действительно учитывает отложенные атрибуты в скриптах. Отсрочка вверху приведет к более быстрой загрузке страницы, если вы ее измерите.
ShadowChaser
Могу ли я посмотреть статистику по скорости загрузки страниц этим методом?
Обновление: по состоянию на начало / середину 2016 года все современные браузеры увеличили количество соединений на имя хоста как минимум до 6.
Night Owl
32
Загружайте только jQuery в голову, конечно через CDN.
Зачем? В некоторых сценариях вы можете включить частичный шаблон (например, фрагмент формы входа в систему ajax) со встроенным jQuery-зависимым кодом; если jQuery загружен внизу страницы, вы получите сообщение об ошибке «$ не определено», хорошо.
Конечно, есть способы обойти это (например, не встраивать JS и не добавлять в js-пакет load-at-bottom), но зачем терять свободную загрузку js возможности размещать зависимый от jQuery код где угодно ? Движок Javascript не заботится о том, где находится код в DOM, при условии что выполняются зависимости (например, загружается jQuery).
Для ваших общих / общих js-файлов, да, разместите их раньше </body>, но для исключений, где на самом деле имеет смысл просто поддержать приложение, чтобы вставить зависимый фрагмент jQuery или ссылку на файл прямо в тот момент в html, сделайте это.
Нет никакой производительности, загружающей jquery в голову; в каком браузере на планете уже нет jQuery CDN файла в кеше?
Много шума из ничего, воткните в голову jQuery и пусть ваша свобода царит.
многие браузеры этого не делают; около 2% - это самый высокий показатель, который я когда-либо читал, когда вы принимаете во внимание версию, а факт кеширования основан на точных именах ресурсов, поэтому jquery1.4.2 не совпадает с jquery1.7, или 1.9.1, или .. .
Тони Leigh
Из них 2%, скажем, половина уйдет до первой загрузки страницы. Таким образом, вы теряете 1%посетителей, но потенциально экономите много времени и усилий на разработке. Посмотрите, имеет ли это смысл в вашей бизнес-модели ...
osa,
13
Nimbuz дает очень хорошее объяснение этой проблемы, но я думаю, что окончательный ответ зависит от вашей страницы: что важнее для пользователя - сценарии или изображения?
Есть некоторые страницы, которые не имеют смысла без изображений, но имеют только второстепенные, несущественные сценарии. В этом случае имеет смысл поместить сценарии внизу, чтобы пользователь мог быстрее увидеть изображения и начать понимать смысл страницы. Другие страницы полагаются на работу сценариев. В этом случае лучше иметь рабочую страницу без изображений, чем нерабочую страницу с изображениями, поэтому имеет смысл поместить сценарии вверху.
Еще одна вещь, которую следует учитывать, это то, что скрипты обычно меньше изображений. Конечно, это обобщение, и вы должны посмотреть, относится ли оно к вашей странице. Если это произойдет, то для меня это будет аргумент для того, чтобы поставить их на первое место как практическое правило (т. Е. Если нет веской причины поступать иначе), потому что они не будут задерживать изображения настолько, насколько изображения будут задерживать сценарии. Наконец, намного проще иметь скрипт наверху, потому что вам не нужно беспокоиться о том, загружены ли они, когда вам нужно их использовать.
Подводя итог, я склоняюсь к тому, чтобы по умолчанию ставить скрипты вверху и рассматривать только то, стоит ли перемещать их вниз, после завершения страницы. Это оптимизация - и я не хочу делать это преждевременно.
Вы были со мной, пока не вытащили аргумент преждевременной оптимизации. Это просто еще одно правило, которому люди следуют догматически, не понимая его последствий.
Роберт Харви
6
О, хорошо, не могу победить их всех! Я верю, что понимаю его значение. :)
EMP
Я не уверен, что вам нужно беспокоиться, если ваши скрипты загружены. Рендеринг блоков до тех пор, пока скрипт не загрузится, о чем и пойдет речь в этой дискуссии. Так что, пока вы ничего не звоните, прежде чем загрузить его, все в порядке. И кроме того, это то, для чего нужны обратные вызовы, и вам не нужно вкладывать больше ничего на свою страницу. Насколько я понимаю, изображения не блокируются (они загружаются параллельно), и фактически DOM может быть готов, и ваши скрипты будут запущены до полной загрузки изображений. Нет смысла ставить сценарии на первое место, чтобы избежать их блокировки.
Дункан
4
Учитывая, что общий консенсус заключается в том, чтобы поставить сценарии внизу, не лучше ли сделать это по умолчанию и перенести их наверх только в случае возникновения проблем? Кажется странным делать вещи задом наперед. Иногда лучше сделать оптимальную вещь, если нет разницы в затраченных усилиях :)
Дункан
@Duncan, да, это был мой подход. Я поместил плагины внизу, и когда у меня возникли проблемы, я поставил их сверху, и это устранило проблемы.
Роберт Харви
6
Большая часть кода jquery выполняется при готовности документа, что в любом случае не происходит до конца страницы. Кроме того, рендеринг страницы может быть задержан из-за синтаксического анализа / выполнения javascript, поэтому рекомендуется размещать весь javascript внизу страницы.
Стандартная практика - поместить все ваши скрипты внизу страницы, но я использую ASP.NET MVC с несколькими плагинами jQuery, и я считаю, что все это работает лучше, если я помещаю свои скрипты jQuery в <head>раздел мастера. стр.
В моем случае, при загрузке страницы возникают артефакты, если скрипты находятся внизу страницы. Я использую плагин jQuery TreeView, и если скрипты не загружаются в начале, дерево будет отображаться без необходимых CSS-классов, навязанных ему плагином. Таким образом, вы получаете этот смешной вид беспорядка при первой загрузке страницы, после чего следует правильное отображение TreeView. Очень плохо выглядит. Размещение плагинов jQuery в <head>разделе главной страницы устраняет эту проблему.
Интранет не подчиняется тем же условиям, что и Интернет, поэтому задержка загрузки, вероятно, менее ощутима. Тем не менее, по-прежнему желательно следовать правилам.
Дункан
нет, размещение CSS-идентификаторов / стилей в разметке (вместо того, чтобы ждать, пока jQuery сделает это на DOM-ready) решает проблему.
Дан Бим
1
@Dan Beam: Treeview заполняется из таблицы базы данных, а стили Treeview устанавливаются плагином Treeview на основе содержимого таблицы, так что нет, это не будет работать.
Роберт Харви
1
Зачем мне это делать, когда я могу просто поместить неизмененный скрипт плагина Treeview вверху страницы, и он будет работать нормально? Это не имеет никакого смысла, Дэн.
Роберт Харви
1
Приветствия Роберт, я также использую ASP.NETMVC с формами в партиалах. Имеет смысл сохранять javascript внутри партиала, поскольку новым полям присваивается их функциональность каждый раз, когда партиал выполняется (скажем, для проверки). Я столкнулся с проблемами только при попытке использовать @Html.Action, который динамически записывает результат в вывод, так как мой $ is undefinedпартиал дает значение, вместо этого я должен использовать .load ('@ Url.Action'), чтобы загрузить партиал. Но это дает фуку из-за дополнительного запроса. Исходя из вашего вклада, я просто перенесу jquery над RenderBody () на моей главной странице
Малкин
4
Хотя почти все веб-сайты по-прежнему размещают Jquery и другой javascript в заголовке: D, даже проверьте stackoverflow.com.
Я также предлагаю вам надеть до конца тег тела. Вы можете проверить время загрузки после размещения в любом месте. Тег Script приостановит загрузку вашей веб-страницы.
и после размещения javascript в нижнем колонтитуле вы можете получить необычный вид вашей веб-страницы, пока она не загрузит javascript, поэтому поместите css в раздел заголовка.
Непосредственно перед тем </body>лучшее место в соответствии с Yahoo Developer Network «s Best Practices для ускорения вашего веб - сайта по ссылке , это имеет смысл.
Для меня JQuery немного особенным. Возможно исключение из нормы. Есть так много других скриптов, которые полагаются на него, поэтому очень важно, чтобы он загружался раньше, чтобы другие скрипты, которые приходят позже, работали как задумано. Как заметил кто-то еще, даже эта страница загружает jQuery в раздел head.
Ответы:
Все скрипты должны быть загружены последними
Практически в каждом случае лучше всего размещать все ссылки на сценарии в конце страницы, непосредственно перед этим
</body>.Если вы не можете сделать это из-за проблем с шаблонами и тому подобного, украсьте свои теги сценария
deferатрибутом, чтобы браузер знал, что нужно загружать ваши сценарии после загрузки HTML:Краевые случаи
Есть некоторые крайние случаи, однако, где вы можете испытать страницу мерцание или другие артефакты во время загрузки страницы , которые , как правило , могут быть решены путем простого размещения ваших ссылок скрипта JQuery в
<head>теге без вdeferатрибуте. Эти случаи включают пользовательский интерфейс jQuery и другие дополнения, такие как jCarousel или Treeview, которые изменяют DOM как часть их функциональности.Дальнейшие предостережения
Есть некоторые библиотеки, которые должны быть загружены до DOM или CSS, такие как polyfills. Modernizr - одна из таких библиотек, которая должна быть помещена в тег head .
источник
<head>. Если ваша разметка зависит от того, как плагин jQuery сортирует контент для вас, нет смысла помещать ссылку на плагин внизу страницы, так как вы будете получать фанки разметки на своей веб-странице до загрузки плагинов. Правила должны соблюдаться до тех пор, пока они не перестанут работать, и в этот момент правила должны быть нарушены.Поместите сценарии внизу
РЕДАКТИРОВАТЬ: 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.
источник