Порядок тегов в <head> </head>
Ответы 14
мета не имеет значения, но важны ссылка (для css) и скрипт.
script заблокирует отображение страницы в большинстве браузеров до тех пор, пока сценарии не будут загружены. Поэтому по возможности кладите их не в голову, а в тело.
css ссылка не будет блокировать рендеринг страницы.
Нет, это не имеет значения, за исключением связывания или включения CSS, из-за наследования CSS и того факта, что он перезаписывает то, что уже было стилизовано (извините за мой английский, я думаю, что мое предложение не совсем ясное: - /).
Оптимизация
По словам сотрудников Yahoo! вам следует использовать поместите CSS вверху и скрипты внизу, потому что скрипты блокируют параллельные загрузки. Но это в основном вопрос оптимизации и не критично для того, чтобы страница действительно работала. Йери Себрехтс указал, что Cuzillion - отличный способ проверить это и лично убедиться в улучшении скорости.
Несколько таблиц стилей
Если вы связываете несколько таблиц стилей, порядок, в котором они связаны, может повлиять на стиль ваших страниц в зависимости от специфика ваших селекторов. Другими словами, если у вас есть две таблицы стилей, которые определяют один и тот же селектор двумя разными способами, последний будет иметь приоритет. Например:
Таблица стилей 1:
h1 { color: #f00; }
Таблица стилей 2:
h1 { color: #00f; }
В этом примере элементы h1 будут иметь цвет #00f, потому что он был определен последним с той же специфичностью:
Несколько скриптов
Если вы используете несколько сценариев, порядок их использования может быть важен, если один из сценариев зависит от чего-то в другом сценарии. В этом случае, если скрипты связаны в неправильном порядке, некоторые из ваших скриптов могут выдавать ошибки или работать не так, как ожидалось. Однако это сильно зависит от того, какие скрипты вы используете.
Лучший способ проверить это - использовать cuzillion (stevesouders.com/cuzillion). Он позволяет вам создать структуру страницы и проверить, как она влияет на производительность загрузки страницы. Вы можете легко убедиться, что размещение скриптов перед таблицами стилей, а не после, требует больше времени для загрузки.
Отличная ссылка, добавлю к своему ответу
Cuzillion ... круто! Голосуйте за это! :) Красиво написанный / скомпилированный пост Джо! :)
Это имело бы значение только в том случае, если один из связанных файлов (CSS / Javascript) зависел от другого. В этом случае сначала необходимо загрузить все зависимости.
Скажем, например, вы загружаете плагин jQuery, тогда вам нужно сначала загрузить сам jQuery. То же самое, если у вас есть файл CSS с некоторыми правилами, расширяющими другие правила.
Обычно рекомендуется располагать тег <script> как можно ниже по странице (не в заголовке, а в теле).
Помимо этого, я не думаю, что это имеет большое значение, потому что тело не может быть проанализировано, если у вас не загружен полностью раздел <head>. И вы хотите, чтобы ваш тег <link> был в голове, поскольку вы хотите, чтобы ваш стиль выполнялся, когда браузер отображает вашу страницу, а не после этого!
Если вы объявляете кодировку в метаэлементе, вы должны сделать это перед любым другим элементом.
Совсем не глупый вопрос. CSS выше тегов сценария по уже упомянутым причинам.
CSS применяется в том порядке, в котором вы размещаете теги - чем конкретнее таблица стилей, тем ниже ее порядок.
То же самое и со сценариями - сценарии, использующие функции, объявленные в других файлах, должны загружаться после загрузки зависимости.
Рекомендуется ставить метатег с кодировкой символов как можно выше. Если кодировка не включена в заголовок ответа запрашиваемой страницы (или отличается от нее), браузер должен будет угадать, какая кодировка. Только когда он находит этот метатег, он знает, с чем имеет дело, и ему придется снова прочитать все, что он уже проанализировал.
См., Например, Способы указания набора символов.
Одно важное замечание: если вы используете метатег Internet Explorer, совместимый с X-UA, для переключения режимов рендеринга для IE, он должен быть первым, что нужно в HEAD:
<head> <meta http-equiv = "X-UA-Compatible" content = "IE=7" /> <title>Page title</title> ...etc </head>
Поместите метатег, который объявляет кодировку первым элементом в заголовке. Браузер пока ищет только тег. Если у вас слишком много вещей перед метаэлементом, кодировка может не применяться.
Если вы используете элемент BASE, поместите его перед любыми элементами, загружающими URI (при желании).
Принятый ответ является вроде неправильный, в зависимости от кодировки документа. Если кодировка не отправляется в заголовке HTTP, браузер должен определить кодировку из самого документа.
Если в документе используется объявление <meta http-equiv = "Content-Type" … для объявления своей кодировки, то любой символ, имеющий значение ASCII (код символа <128), встречающийся перед этим оператором должен, будет значением ASCII согласно Спецификация HTML 4. Поэтому важно, чтобы это объявление meta находилось перед любым другим элементом, который может содержать символы, отличные от ASCII.
Как уже указывалось, мета, описывающая кодировку контента, должна быть первой, иначе это может быть дырой в безопасности в определенной ситуации. (извините, я не помню эту ситуацию достаточно хорошо, чтобы описать здесь, но это было продемонстрировано мне на учебном курсе по веб-безопасности)
Недавно у меня возникла проблема с перетаскиваемым элементом пользовательского интерфейса jquery. Он вёл себя правильно в Firefox, но не в Safari. После тонны проб и ошибок исправление заключалось в том, чтобы переместить мои ссылки css над ссылками на javascript в голове. Очень странно, но теперь это станет моей стандартной практикой.
В целях проверки как XHTML - да. В противном случае вы, вероятно, будете заботиться об оптимизационных ответах.
Это имеет значение. Если вы, например, <ссылка> на две таблицы стилей, последняя переопределит первый оператор on с той же специфичностью CSS.