CSS 文件加载是否可以通过 http LINK header 延迟并阻止渲染

Can CSS file loading be deferred via http LINK header and does that block rendering

如果我们很早就使用 http link header 向 CSS 文件提供 link,那么哪些浏览器不会下载此文件 link 并且是否有任何浏览器可用于以这种方式提供的 CSS 文件会阻止渲染 "above the fold content"?

这将是 HTTP header:

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

这是同一件事的未经测试的 PHP 实现(如果没有像上面 link 中提示的那样配置 apache 来执行此操作):

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

问题: 跨浏览器兼容性和渲染阻塞行为

我不确定你是否可以使用 header() 函数来做到这一点,但是 non-blocking css 可以使用 JavaScript 来完成 - 请参阅此粘贴:http://pastebin.com/TYcnb99m

它使用本地存储作为加载的 css 个文件的缓存并且是 non-blocking。

更多链接:

希望对您有所帮助。

提前致歉,我的回复没有直接提及 http Link header 的使用。如果 objective 是尝试异步加载 non-critical CSS(在后台不阻塞页面渲染),这可以通过 JavaScript 实现。请参阅 loadCSS 项目以获得一些好的文档和示例。

通常,以标准方式(例如 <link href="path/to/mystylesheet.css" rel="stylesheet">)包含的所有 CSS 文件实际上会阻止页面呈现,直到所有样式表都完成加载。这是出于浏览器的良好性能原因,以防止在每个样式表加载完成后加载页面时出现多个 re-layouts 和 re-paints。

这个解决方案的想法基本上是将 non-critical 样式表的媒体类型更改为浏览器认为对页面呈现不重要的内容(例如 "only x"),然后手动将媒体类型切换回标准 "all"(或根据需要的其他值),这很可能在资源加载完成之后,但如果需要,可以根据您的用例进一步推迟。

只要你只需要支持比较现代的浏览器,这个方法还是比较靠谱的。我已经在生产中使用它来制作具有数百万页面浏览量的内容。您可以使用 Link header 实现类似的功能,但您仍然需要一些客户端脚本来检测资源何时完成加载并将媒体类型切换回 "all".