Порядок тегов в <head></head>

не имеет значения, в каком порядке теги <link> или <script> или <meta> находятся в <head></head>?

(глупый вопрос, но одна из тех вещей, о которых я никогда не думал до сих пор.)

Ответ 1

Принятый ответ является неправильным, в зависимости от кодировки документа. Если кодировка не отправляется в HTTP-заголовке, браузер должен определить кодировку из самого документа.

Если в документе используется объявление <meta http-equiv="Content-Type" … для объявления его кодировки, то любой знак ASCII-символа (код символа < 128), встречающийся перед этим оператором , должен быть значением ASCII, согласно спецификация HTML 4. Поэтому важно, чтобы это объявление meta было встречено перед любым другим элементом, который может содержать символы, отличные от ASCII.

Ответ 2

Оптимизация

По словам людей в Yahoo! вы должны поместить CSS вверху и сценарии внизу потому что скрипты блокируют параллельные загрузки. Но это в основном вопрос оптимизации и не имеет решающего значения для действительно работающей страницы. Joeri Sebrechts указал, что Cuzillion - отличный способ проверить это и см. улучшение скорости для себя.

Несколько стилей

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

Таблица стилей 1:

h1 { color: #f00; }

Таблица стилей 2:

h1 { color: #00f; }

В этом примере элементы h1 будут иметь цвет #00f, потому что он был определен последним с той же специфичностью:

Несколько скриптов

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

Ответ 3

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

См. например Способы указания набора символов.

Ответ 4

Важно отметить: если вы используете тег Internet Explorer meta X-UA-Compatible для переключения режимов рендеринга для IE, это должно быть первым в HEAD:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
&lt/head>

Ответ 5

meta не имеет значения, но имеет значение ссылка (для css) и script.

script блокирует большинство браузеров от рендеринга страницы до загрузки скриптов. Поэтому, если возможно, поместите их не в голову, а в тело.

Ссылка css не будет блокировать отображение страницы.

Ответ 6

Обычно рекомендуется иметь тег <script> как можно ниже на странице (не в голове, а в теле).

Кроме этого, я не думаю, что это имеет большое значение, потому что тело не может быть проанализировано, если вы не полностью загрузили раздел <head>. И вы хотите, чтобы тэг <link> находился в голове, так как вы хотите, чтобы ваш стиль выполнялся, когда браузер отображает вашу страницу, а не после этого!

Ответ 7

Если вы объявляете charset в мета-элементе, вы должны сделать это перед любым другим элементом.

Ответ 8

Не глупый вопрос.
CSS выше Script тегов по уже упомянутым причинам.

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

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

Ответ 9

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

Если вы используете элемент BASE, поместите его перед любыми элементами, которые загружают URI (при желании).

Ответ 10

Было бы важно, если бы один из связанных файлов (CSS/Javascript) зависел от другого. В этом случае сначала должны быть загружены все зависимости.

Скажем, например, вы загружаете плагин jQuery, вам нужно сначала загрузить jQuery. То же самое, когда у вас есть файл CSS с некоторыми правилами, расширяющими другие правила.

Ответ 11

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

Ответ 12

У меня недавно возникла проблема с перетаскиваемым элементом jquery ui. Это правильно работает в Firefox, но не в Safari. После тонны проб и ошибок, исправление должно было переместить мои ссылки css над ссылками javascript в голове. Очень странно, но теперь станет моей стандартной практикой.

Ответ 13

В целях проверки как XHTML, да. В противном случае вы, вероятно, будете заботиться об ответах на оптимизацию.

Ответ 14

Нет, это не имеет значения, кроме привязки или включения CSS из-за наследования CSS и того факта, что он перезаписывает то, что уже было написано (извините за мой английский, я думаю, что мое предложение не совсем ясно: -/).