Как изменится фронтенд с HTTP/2
Повсеместное внедрение HTTP/2 в общем-то не за горами и уже сейчас самое время подумать о том, как это скажется на привычных практиках работы с фронтендом.
С чем мы живем
Некоторые, уже привычные методы работы с файлами, которые получает браузер, с появлением HTTP/2 могут стать ненужными или вовсе будут замедлять скорость работы сайта. Давайте посмотрим о чем идет речь.
1. Конкатенация и минификация
JavaScript и CSS файлы обычно сжимаются, то есть из них удаляются лишние символы, такие как знаки пробела, а маленькие кусочки кода объединяются в один большой CSS или JS файл для ускорения загрузки (ведь быстрее передать все нужные данные одним запросом).
2. Спрайты
Мелкие детали интерфейса, реализованные в качестве изображений, обычно объединяются в один файл, который позже с помощью CSS-свойства background-position показывает на экране ту или иную свою часть в нужный момент. Это делается также для ускорения передачи данных от сервера клиенту.
3. Шардинг
Изначально HTTP разрешал использовать клиенту максимум два TCP соединения на каждый хост, что очень плохо сказывалось на работе сайта, особенно в приложениях, где происходит плотное общение с базой данных. Позже количество разрешенных соединений увеличилось, но также было фиксированным.
Чтобы не нарушать спецификацию, продвинутые сайты просто придумывали новые имена хостов – и вот, вы можете получить большее число соединений для вашего сайта и сократить время загрузки страницы.
4. Инлайн
Также для ускорения загрузки страниц некоторые критические части CSS или JS-кода размещаются прямо в теле HTML-документа. А ещё одна уловка для избежания отправки отдельных изображений – использование вместо этого data-URL, встроенного в CSS файл. Такой подход имеет те же преимущества и недостатки, что и случай со спрайтами.
.icon1 {
background: url(data:image/png;base64,) no-repeat;
}
.icon2 {
background: url(data:image/png;base64,) no-repeat;
}
Объем обработки для всех подключений, необходимый для получения и передачи информации таким образом, только добавил проблем с производительностью. И хорошая новость заключается в том, что в новом мире HTTP/2 использование многих из этих методов оказывается под вопросом.
Производительность фронтенда с HTTP/2
HTTP/2 радикально снижает затраты на передачу данных множественными запросами за счет мультиплексирования, то есть возможности передать несколько файлов в одно время и в одном соединении. Это же соединение может оставаться открытым для повторного использования продолжительное время.
Если принять это во внимание, конкатенация файлов перестанет быть обязательной и вообще лучшей практикой, поскольку конкатенация плохо сказывается на кэшировании. То есть, при изменении небольшой части файла, браузеру придется загружать весь огромный файл стилей или js-скриптов целиком заново, а не взять лишь ту часть и тот файл, которые были изменены.
Что делать?
HTTP/2 обратно совместим с HTTP/1.1. Поэтому, в общем-то можно ничего не делать – работе ваших проектов ничего не угрожает.
Но по мере перехода популярных веб-серверов и веб-браузеров на HTTP/2 вы увидите, что ваш сайт, который когда-то был оптимизирован для увеличения скорости загрузки страниц и повышения производительности, уже работает не так быстро, как раньше.
Многие способы оптимизации, успешно используемые в HTTP/1.1, в HTTP/2 работать не будут. Некоторые из них потребуется модифицировать, а от некоторых ― отказаться вообще.