[TIL] Как работает HTTP заголовок Link preload

При наличии HTTP заголовка link в ответе от сервера со списком ресурсов и атрибутом rel=preload эти ресурсы загрузятся автоматически.

Вы спросите, и что тут нового? Но вы возможно подумали про элемент <link>. И даже документация говорит, что заголовок Link и элемент <link> семантически эквивалентны

А разница как раз в порядке обработки.
Если предзагрузка указана с помощью элемента

<link rel="preload"  href="style.css" >

внутри тэга <head>, то браузер ещё должен распарсить HTML и начать писать в document

А вот при использовании заголовка
Link: <https://example.com/srtyle.css>;rel=preload;as=style
загрузка начнётся ещё до парсинга. И вообще без парсинга тела браузер тоже начнёт загружать. И для ускорения отображения страницы это хорошо. Но иногда может и помешать. Как например в моём случае. Собственно, как и узнал о данной особенности :-)

Делал скриптовый XHR запрос страницы для дальнейшего получения малой доли информации. Вся остальная страница не интересовала. Но этот код запускался как часть браузерного расширения. И эти дополнительные запросы на скачивание блокировались и вызвали ошибку доступа. При чём каждый раз ещё до того как вызовется обработчик xhr.onloadend основного запроса.

2 лайка