4

Как, всё-таки, правильно подключать стили и js файлы?

Во многих источниках указано, что наиболее верным является такой способ: css в начале(в head), а js в конце, перед закрытием . Но когда я смотрю на крупнейших ресурсах как это сделано, то получается везде по-разному, а ведь, как я понимаю, крупнейшие ресурсы заботятся о скорости загрузки сайта в первую очередь. Кто-то всё размещает в head, кто-то и так, и сяк.

Или тут есть какие-то "подводные камни" на которые стоит обратить внимание? Просто весьма интересно. Сам всегда размещаю css в начале, а все js в конце.

1
  • 1
    Крупнейшие ресурсы проверяли на скорость? Действительно все быстрые? Просто интересно, не подумайте ничего. Парочку как-то проверяла, а там о скорости и речи нет.
    – SVE
    Commented 1 сент. 2016 в 11:01

2 ответа 2

6

Почему модель css вверху, js внизу более привлекательная?

Тут важный момент это то, что браузер загружает страницу сверху вниз

Сценарий №1

Есть страница на которой скрипты и стили вверху

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="scripts.js" type="text/javascript"></script>       
    </head>
    <body>
         <!-- here is page content -->             
    </body>
</html>

Примерный сценарий ее загрузки будет такой:

  1. Загрузка стилей
  2. Загрузка скриптов
  3. Загрузка остальной разметки

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

Сценарий №2

Есть страница на которой стили вверху, а скрипты перед закрывающим тегом body

<html>
    <head>
        <link rel="stylesheet" href="styles.css">       
    </head>
    <body>
        <!-- here is page content -->             
        <script src="scripts.js" type="text/javascript"></script>
    </body>
</html>

Примерный сценарий ее загрузки будет такой:

  1. Загрузка стилей
  2. Загрузка разметки
  3. Загрузка скриптов

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

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

3
  • В первом случае "браузер должен загрузить стили и скрипты". Скрипты загружаются асинхронно, как правило, поэтому не аргумент.
    – edem
    Commented 1 сент. 2016 в 12:06
  • @edem, полагаю Вы не совсем правы, до момента загрузки всех скриптов идет блокировка дальнейшего рендера страницы. Т.е если в хедере есть скрипты то разметка не будет генерироваться до тех пор пока все скрипты в хедере не будут загружены и обработаны. Приведите аргументы если я не прав.
    – Den Kison
    Commented 1 сент. 2016 в 12:26
  • Нет, в Вашем примере у Вас правильные выводы, это я забыл что для изменения поведения необходимо явно указывать параметры загрузки скриптов с помощью defer или async. Подробнее w3.org/TR/html51/…
    – edem
    Commented 1 сент. 2016 в 13:25
3

Вынесите в конец то, что не является необходимым для оформления вашего сайта. Ведь при открытии сайта пользователь вначале видит его, а потом - взаимодействует с ним. Если (условно говоря) в каком-то скрипте у вас стоит изменение шрифтов (в зависимости от устройства, размера экрана, Math.random() =)), то этот скрипт имеет смысл разместить повыше, что бы пользователь скорее увидел сайт в нужном виде. Если же какой-то скрипт занимаются обработкой изображений предпросмотров, подгрузку статей по мере прокрутки или выполняет ещё какие-то действия, не влияющие на то, что видит пользователь в первое мгновение открытия сайта - вынесите это ниже.

В общем, перефразируя один лозунг, - "функционал ничто, вид - всё!" :)

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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