Может ли загрузка файла CSS быть отложена через заголовок http LINK и блокирует ли это рендеринг?
Если мы используем заголовок http ссылки предоставить ссылку на файл CSS очень рано, какие браузеры НЕ будут загружать эту ссылку, и есть ли браузеры, для которых файл CSS, предоставленный таким образом, будет блокировать рендеринг «содержимого выше сгиба»?
Это будет заголовок HTTP:
Link: <style.css>; rel="stylesheet"Это непроверенная реализация PHP того же самого (если вы не настроите apache, чтобы сделать это, как указано в ссылке выше):
<?php
header('Link: <style.css>; rel="stylesheet"');
?>
Вопрос: кросс-браузерная совместимость и блокировка рендеринга
Решение
Заранее извиняюсь, что мой ответ не имеет прямого отношения к использованию заголовка http Link. Если цель состоит в том, чтобы попытаться загрузить некритический CSS-код асинхронно (в фоновом режиме, не блокируя рендеринг страницы), этого можно достичь с помощью JavaScript. Увидеть loadCSS проект для хорошей документации и примеров.
Обычно все файлы CSS включены стандартным способом (например, <link href="path/to/mystylesheet.css" rel="stylesheet">) фактически блокируйте рендеринг страниц, пока ВСЕ таблицы стилей не будут загружены. Это делается из соображений хорошей производительности браузерами, чтобы предотвратить несколько повторных макетов и перерисовок при загрузке страницы после завершения загрузки каждой таблицы стилей.
Идея этого решения в основном состоит в том, чтобы изменить тип мультимедиа для некритических таблиц стилей на то, что браузер сочтет неважным для рендеринга страницы (например, «только х»), а затем вручную переключить тип мультимедиа на стандартное «все» (или другое значение по мере необходимости), которое, вероятно, после того, как ресурс завершит загрузку, но может быть дополнительно отложено, если необходимо, в зависимости от вашего варианта использования.
Этот метод достаточно надежен, если вам нужно только поддерживать относительно современные браузеры. Я использовал его в производстве для контента, который имел миллионы просмотров страниц. Возможно, вы сможете реализовать нечто подобное, используя заголовок Link, но вам все равно понадобится некоторый сценарий на стороне клиента, чтобы определить, когда ресурс завершил загрузку, и переключить тип носителя обратно на «all».
Другие решения
Я не уверен, что вы можете сделать это с header() функция, но неблокирующая CSS может быть сделана с помощью JavaScript — см. эту вставку: http://pastebin.com/TYcnb99m
Он использует локальное хранилище в качестве кэша для загруженных CSS-файлов и является неблокирующим.
Еще несколько ссылок:
Надеюсь это поможет.