Порядок тегов в <head></head> - PullRequest
Новая
       24

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

46 голосов
/ 10 октября 2008

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

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

Ответы [ 14 ]

41 голосов
/ 10 октября 2008

Оптимизация

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

Несколько таблиц стилей

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

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

h1 { color: #f00; }

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

h1 { color: #00f; }

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

Несколько сценариев

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

15 голосов
/ 10 октября 2008

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

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

10 голосов
/ 10 октября 2008

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

См., Например, Методы указания набора символов .

8 голосов
/ 10 октября 2008

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

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
&lt/head>
5 голосов
/ 10 октября 2008

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

Скрипт

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

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

2 голосов
/ 10 октября 2008

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

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

2 голосов
/ 10 октября 2008

Совсем не глупый вопрос.
CSS выше Теги скрипта по причинам, уже упомянутым.

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

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

2 голосов
/ 10 октября 2008

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

2 голосов
/ 10 октября 2008

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

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

1 голос
/ 16 октября 2008

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

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

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

...