3

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

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

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

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

2 ответа 2

5

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

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

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

Ваш ответ

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

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