Может ли загрузка файла CSS быть отложена через HTTP-заголовок LINK и выполняет ли это рендеринг блоков

Если мы используем заголовок http, чтобы предоставить ссылку на файл CSS очень рано, какие браузеры НЕ будут загружать эту ссылку, и есть ли какие-либо браузеры, для которых Файл CSS, предоставленный таким образом, блокирует рендеринг "над содержимым складки"?

Это будет HTTP-заголовок:

Link: <style.css>; rel="stylesheet"

Это непроверенная реализация PHP одной и той же вещи (если вы не настроите apache так, как это намечено в ссылке выше):

<?php
header('Link: <style.css>; rel="stylesheet"');
?>

Вопрос: совместимость кросс-браузера и поведение блокировки рендеринга

Ответ 1

Извините заранее, что мой ответ напрямую не связан с использованием заголовка http Link. Если целью является попытка асинхронно загружать некритические CSS (в фоновом режиме без блокировки отображения страницы), это может быть достигнуто с помощью JavaScript. См. Проект loadCSS для некоторых хороших документов и примеров.

Обычно все CSS файлы, включенные стандартным способом (например, <link href="path/to/mystylesheet.css" rel="stylesheet">), фактически выполняют показ блочной страницы, пока все таблицы стилей не закончили загрузку. Это связано с хорошими показателями производительности браузерами, чтобы предотвратить множественные повторные макеты и повторные краски при загрузке страницы после того, как каждая таблица стилей заканчивает загрузку.

Идея с этим решением в основном заключается в том, чтобы изменить тип носителя для некритических таблиц стилей на то, что браузер увидит как несущественный для рендеринга страницы (например, "только x" ), а затем вручную переключит тип медиафайла вернуться к стандартному "все" (или другому значению по мере необходимости), что, скорее всего, после того, как ресурс завершит загрузку, но может быть дополнительно отложен по желанию на основе вашего варианта использования.

Этот метод довольно надежный, пока вам нужно только поддерживать относительно современные браузеры. Я использовал его в производстве для контента, который имел миллионы просмотров страниц. Возможно, вы сможете реализовать что-то подобное с помощью заголовка Link, но вам все равно потребуется некоторая клиентская сторона script, чтобы обнаружить, когда ресурс завершил загрузку, и переключить тип носителя обратно на "все".

Ответ 2

Я не уверен, что вы можете сделать это с помощью функции header(), но неблокирующий css можно выполнить с помощью JavaScript - см. эту вставку: http://pastebin.com/TYcnb99m

Он использует локальное хранилище в качестве кеша для загружаемых файлов css и не блокирует.

Еще несколько ссылок:

Надеюсь, что это поможет.