Почему модель 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>
Примерный сценарий ее загрузки будет такой:
- Загрузка стилей
- Загрузка скриптов
- Загрузка остальной разметки
В данном сценарии есть недостаток, до момента отображения непосредственно контента страницы браузер должен загрузить стили и скрипты, что дает довольно большую задержку если это крупный ресурс.
Сценарий №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>
Примерный сценарий ее загрузки будет такой:
- Загрузка стилей
- Загрузка разметки
- Загрузка скриптов
В данном сценарии есть преимущества по сравнению с первым, до момента отображения непосредственно контента страницы браузер должен загрузить только стили, а скрипты он загрузит в последнюю очередь, что позволяет пользователю быстрее увидеть содержимое страницы.
Почему стили стоит оставлять вверху?
Если стили также как и скрипты перенести вниз страницы то разметка после загрузки будет не стилизована, что будет выглядеть довольно некрасиво до момента загрузки стилей.