3

Я не уверен, что подключил файлы в HTML5(head) в правильном порядке.

meta name='viewport' content='width=device-width, initial-scale=1' должен идти до подключения основных стилей или после? meta charset="utf-8" должен быть в самом начале head?

Пожалуйста, проверьте на правильность всю мою последовательность подключения файлов =)

P.S Знаю, что комменты через // не работают в Html5, сделал так для удобного чтения.

<head>

  <script defer type="text/javascript" src="jquery-3.6.0.min.js">
  </script> // Библиотека Jquery
  <script defer type="text/javascript" src="java.js">
  </script> // Язык javascript

  <link type="text/css" rel="stylesheet" href="css/normalize.css"> // Обнулятор Нормалайз
  <link type="text/css" rel="stylesheet" href="css/fonts.css"> // Шрифты
  <link type="text/css" rel="stylesheet" href="css/style.css"> // Основные стили сайта
  <link type="text/css" rel="stylesheet" href="css/media.css"> // Медиа запросы

  <meta charset="utf-8"> // Кодировка символов
  <meta name='viewport' content='width=device-width, initial-scale=1' /> // Нужно для медиа запросов
  <meta content='true' name='HandheldFriendly' />
  <meta content='width' name='MobileOptimized' />
  <meta content='yes' name='apple-mobile-web-app-capable' />

</head>
7
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 28 янв 2022 в 6:56
  • Расположение тегов meta не имеет никакого значения
    – andreymal
    30 янв 2022 в 12:22
  • А подключение CSS и JS? 30 янв 2022 в 13:02
  • @andreymal, неправда.
    – Qwertiy
    30 янв 2022 в 13:52
  • @Qwertiy пример?
    – andreymal
    30 янв 2022 в 14:34

1 ответ 1

8
  1. Тег <title> вообще отсутствует, это и стандарту не соответствует, и для пользователя так себе, ведь в заголовке вкладки вместо осмысленного текста он увидит просто тест ссылки, а учитывая ширину вкладки, только домен.

  2. Раньше была рекомендация ставить meta charset как можно раньше: по идее браузер встретив этот meta-тег выбрасывает всё, что распарсил до этого, и начинает сначала - ну и чем меньше он выбросит, тем быстрее получится. Возможно, это сейчас неактуально (тем более, большинство серверов умеют выставлять нужную кодировку сразу в http-заголовках), но я не вижу причин не следовать этой рекомендации.

  3. Остальные meta-теги можно располагать в любом порядке.

  4. А вот атрибуты name и content у мета-тегов я бы чисто из соображений читаемости кода поставил в другом порядке: сначала name, а потом content. Хотя браузеру всё равно.

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

  6. У скриптов есть атрибут defer, который позволит браузеру продолжить парсить страницу не дожидаясь получения и выполнения скриптов - это хорошо. В таком варианте скрипты выполнятся в заданном порядке после завершения обработки страницы. Очевидно, что async делать нельзя, поскольку второй скрипт наверняка зависит от первого.

  7. Тем не менее, я не стал бы скрипты ставить первыми. Традиционно есть рекомендация ставить вообще в конец body и все стандартные сборщики фреймвёрков так поступают. Хотя defer не мешает парсить страницу, думаю, для этого всё ещё есть интересная причина. Браузер, встречая при парсинге страницы новый ресурс, сразу посылает за ним запрос (иногда даже при предварительном парсинге, когда точно неизвестно, понадобится ли он вообще). В случае скриптов в начале на сервер отправятся запросы за скриптами, а количество соединений с одним доменом при http 1 ограничено 6. Http 2 позволяет батчить запросы и выставлять им приоритеты, так что у defer-скриптов будет приоритет ниже, но большинство серверов эти приоритеты полностью игнорирует. Так что стоит подвинуть скрипты после стилей.

  8. Что касается выбора между концом head и концом body: на странице могут встречаться другие ресурсы - например, картинки. В случае с концом body они будут запрошены до скриптов, что имеет смысл. У тебя вообще jquery, так что более-менее адекватную страницу пользователь может увидеть и без скриптов. А у фреймвёрков может быть SSR, благодаря которому тоже можно отправлять уже отрендеренную страницу. Так что я считаю рекомендацию помещать скрипты в конец body актуальной до сих пор.

7
  • 2
    Кстати с кодировкой обнаружил забавный эффект в Firefox: если в head воткнуть <script>alert('Привет');</script>, потом написать пару килобайт какого-нибудь мусора и только после этого воткнуть meta charset, то alert сработает два раза — первый раз с неправильной кодировкой, второй раз с правильной) А вот в Chromium повторить этот эффект не получилось
    – andreymal
    30 янв 2022 в 19:39
  • 2
    Ну и в консоли Firefox появляется соответствующее предупреждение: «Страница была перезагружена, так как объявление кодировки символов HTML-документа не было найдено при предварительном сканировании первых 1024 байтов файла.»
    – andreymal
    30 янв 2022 в 19:42
  • @andreymal, ну значит оптимизируются понемногу. Вот, решили килобайт сканировать. Хром всегда не очень стремился торопиться с рендерингом страницы, можно попробовать ещё между alert'ом и meta воткнуть внешний скрипт - может тогда надумает.
    – Qwertiy
    30 янв 2022 в 20:06
  • Благодарю, а если вам не составит труда, то не могли бы вы привести правильный пример моего кода. Я был бы очень признателен вам =) На примерах я быстро все схватываю =) И что такое rjywjv, он у вас в 8 пункте. 31 янв 2022 в 3:09
  • "Так что стоит подвинуть скрипты после стилей" Лучше передвинуть скрипты в конец body или после стилей в head? 31 янв 2022 в 3:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.