Где размещать css и js файлы - в начале или конце документа?

#html #производительность

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

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

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

Ответы

Ответ 1

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

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

Сценарий №1

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


    
        
               
    
    
                      
    



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


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


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

Сценарий №2

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


    
               
    
    
                     
        
    



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


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


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

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


Ответ 2

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

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