Нет, я и не думаю заниматься подобным олдскуллерским извращением вручную. Предположим, что мы с помощью какой-нибудь утилиты типа препроцессора заменили подключение стилей <link rel="stylesheet" type="text/css" href="styles.css">
на прямую вставку стилей <style type="text/css">...</style>
, а подключение скриптов опять же на прямую вставку кода в HTML-страницу. То есть теперь у нас и HTML, и стили, и JS находятся в одном файле, и нам не надо делать дополнительные запросы к серверу для стилей и скриптов. Какой это даст выигрыш в быстродействии и скорости загрузки страницы?
1 ответ
Если сервер отдает контент по http 2.0
– то разницы никакой не будет, потому что данные будут отдаваться параллельно и не будут блокировать загрузку друг друга. Если же по http 1.1
– то через инлайн-вставку мы уменьшим количество http
запросов и ускорим загрузку контента в первый раз.
Однако стоит учитывать, что таким образом мы будем загружать js
и css
каждый раз с html
-документом, тогда как внешние файлы мы могли бы закешировать на стороне пользователя.
Также есть смысл вынести некоторые критические стили в <style type="text/css">...</style>
, чтобы не блокировать рендеринг html. Что такое Critical rendering path
, подробно разобрано в этой теме.
Если интересуют другие методы оптимизации фронта, то советую вам глянуть мой ответ к этому вопросу.
-
Благодарю Вас за ответ! Да, меня тема оптимизации фронтенда очень даже интересует. 8 апр 2018 в 1:35
</html>
- это просто длинная строка, которую возвращает сервер один раз в течение просмотра конкретной страницы. Поэтому не совсем ясно, что куда "передавать каждый раз"...