Где в HTML файле должны быть размещены Jquery и Bootstrap?

Интересно, где я размещаю файлы Jquery и Bootstrap. Они рекомендуют, чтобы вы всегда делали снизу для достижения целей, но когда я проверяю сайты, которые используют Jquery/Bootstrap, большинство пользователей всегда помещают их наверху. Также должен ли я загружать свои собственные файлы JavaScript до или после файлов bootstrap/Jquery?

Я считаю, что сначала загружаю свой собственный файл css перед загрузкой, если я хочу переопределить некоторые их стили, правильно ли это и что же касается файлов javascript?

ОТВЕТЫ

Ответ 1

Обычно стили в голове и скриптах перед закрывающим тегом </body>:

<html>
  <head>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="your-other-styles.css">
  </head>
  <body>
    <!-- content -->
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
    <script src="your-other-scripts.js"></script>
  </body>
</html>

Вы хотите, чтобы файлы от поставщиков, таких как jQuery и Bootstrap, включались до. Это означает, что:

  • CSS: вы можете переопределить свои стили своими собственными *
  • Скрипты: у вас есть доступ к любым объектам, добавленным в глобальную область, например window (jQuery добавляет $, например)

Однако, если вам требуется, чтобы script был доступен до загрузки вашего контента (например, Modernizr), тогда его размещение в <head> гарантирует его готовность перед любым вашим контентом.

Включение скриптов внизу гарантирует, что сначала загружается содержимое страницы; когда сценарии будут окончательно загружены, контент (DOM) будет готов к работе с вашими сценариями.

* при условии, что ваша специфичность селектора по крайней мере равна той, что у вашего поставщика CSS

Ответ 2

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

Хотя в некоторых случаях может потребоваться загрузить JavaScript до загрузки страницы, если какая-либо из ваших функций должна получить доступ к JavaScript до загрузки страницы. Особенно, если вы работаете с JQuery UI и Bootstrap.

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

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

или

  <script src="demo_async.js" async></script>

При наличии, он указывает, что script будет выполняться асинхронно, как только он будет доступен.

http://www.w3schools.com/tags/att_script_async.asp

Если вам нужен script для доступа к странице для использования, то перед ее использованием необходимо script.

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

Стиль css должен присутствовать в верхнем <Head> для доступа на странице.

Ответ 3

Это действительно зависит от того, чего вы хотите достичь, но, как правило, JS размещается внизу и CSS в вашем разделе главы. Убедитесь, что библиотека jquery загружается перед загрузкой библиотеки Bootstrap JS и ваши пользовательские загрузки файлов css после Bootstrap CSS, поэтому она будет отменена. Вы можете загрузить Bootstrap CSS из своих CND (или других, например, cloudflare - например http://cdnjs.com/libraries).

Убедитесь, что вы все это уменьшите и активируете сжатие, и вы не должны испытывать проблем с производительностью.

Передовая техника подразумевает использование самой важной части вашего CSS в области головы, а затем отправку остальной части CSS в нижней области. Или у вас есть весь статический контент (CSS + JS), размещенный на CDN.