Где я должен разместить код CSS и Javascript на веб-странице HTML? - PullRequest
Новая
       1

Где я должен разместить код CSS и Javascript на веб-странице HTML?

57 голосов
/ 08 июля 2011

Где я должен разместить следующий код при разработке веб-страницы?

<link rel=stylesheet type="text/css" href="css/layout.css">

Должен ли я положить его в <head> или я должен положить в <body>? Пожалуйста, уточните следующие вопросы:

  1. Какая разница, если я помещу его в <head> или где-нибудь еще в HTML-коде?
  2. Что если у меня есть два файла CSS (или Javascript)? Поскольку я могу включить только один файл перед другим, какой файл будет использоваться веб-браузером для отображения веб-страницы?

Ответы [ 10 ]

73 голосов
/ 08 июля 2011

На мой взгляд, лучшая практика - поместить CSS-файл в заголовок 

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

и файл Javascript перед закрывающим тегом </body> 

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

Также, если выесть, как вы сказали, два файла CSS.Браузер будет использовать оба.Если бы были какие-то селекторы, т.е..content {}, которые были одинаковыми в обоих CSS-файлах, браузер перезапишет аналогичные свойства первого свойствами второго.Если это имеет смысл.

18 голосов
/ 08 июля 2011

Поместить таблицы стилей вверху Ссылки на обсуждение

Во время исследования производительности в Yahoo !, мы обнаружили, что перемещение таблиц стилей в документ HEAD делает страницы загружаемыми быстрее. Это связано с тем, что размещение таблиц стилей в заголовке позволяет странице отображаться постепенно.

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

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

В спецификации HTML четко указано, что таблицы стилей должны быть включены в HEAD страницы: «В отличие от A, [LINK] может появляться только в разделе HEAD документа, хотя может появляться любое количество раз». Ни одна из альтернатив, чистый белый экран или вспышка не стилизованного контента, не стоит риска. Оптимальным решением является следование спецификации HTML и загрузка таблиц стилей в документ HEAD.

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

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

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

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

8 голосов
/ 08 июля 2011
  1. Вы должны поместить ссылки на таблицу стилей и javascript <script> в <head>, как это диктуется форматами.Однако некоторые помещают javascript <script> s внизу тела, так что содержимое страницы будет загружаться без ожидания <script>, но это компромисс, так как выполнение скрипта будет отложено до загрузки других ресурсов.*
  2. CSS имеет приоритет в том порядке, в котором они связаны (в обратном порядке): первое переопределяется вторым, переопределяется третьим и т. Д.
5 голосов
/ 08 июля 2011

Вы должны поместить CSS в <head>, потому что это то, что сказано в спецификации.

Если у вас более одного CSS-файла, они будут загружены в том порядке, в котором вы их поместили в код.Если во втором файле CSS есть стиль, он перезаписывает стиль в первом;Это произойдет по замыслу.Таким образом, Каскадные Таблицы стилей.

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

Вы можете использовать файл JavaScriptссылки в любом месте документа.Существуют разные причины использовать некоторые в <head>, а некоторые в других местах на странице.(Например, аналитический код Google должен располагаться внизу.)

4 голосов
/ 19 апреля 2018

На мой взгляд, лучший способ - это 1) поместить CSS-файл в заголовок между заголовком тега. Причина в том, что на первой странице показано представление для этого css, требуется 2), а весь файл js следует поместить перед закрывающим тегом тела.причина в том, что после отображения всех компонентов может применяться

2 голосов
/ 08 июля 2011

CSS включает в себя head перед любым js скриптом.Javascript может идти куда угодно, но на самом деле функция файла может определять его местоположение.Если он создает содержимое страницы, поместите его на голову.Если он используется для событий или отслеживания, вы можете поставить его до </body>

2 голосов
/ 08 июля 2011

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

1 голос
/ 08 июля 2011

Что касается <link /> и <style />, у вас нет выбора, они должны находиться в разделе <head /> (см. one и two ).

Что касается <script />, то может появляться как в <head />, так и в <body /> (см. three ), обычно рекомендуется помещать их в <head />, поскольку на самом деле они не являются «контентом» (где «контент» - это то, что пользователь видит на экране), они в большей степени «работают» над «контентом».

W3C HTML4 спецификация FTW!

0 голосов
/ 13 августа 2018

КАК в моем исследовании в css месте всегда внутри .like: - 

 <head>
  <link href="css/grid.css" rel="stylesheet" />
 </head>

и для скрипта его зависимость: -

  1. Если внутри документа скрипта.напишите подарок, тогда он будет в теге head.
  2. Если скрипт содержит атрибут DEFER, BECAUSE defer загружает все параллельно
0 голосов
/ 08 июля 2011

И если у вас есть несколько файлов .css или .js для вызова, просто включите их один за другим, или: 

<head>

<link href="css/grid.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...