可以通过http LINK标头延迟CSS文件加载,并阻止渲染

Question

如果我们使用http链接标头很早就提供了一个链接到CSS文件的浏览器不会下载此链接,那么任何以这种方式提供CSS文件的浏览器都会阻止呈现"首屏内容"？

这将是HTTP标头:

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

这是一个未经测试的同一件事的PHP实现(如果没有像上面的链接中暗示的那样配置apache):

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

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

Answer 1

提前致歉，我的回复不直接涉及 http 链接标头的使用。如果目标是尝试异步加载非关键 CSS（在后台而不阻塞页面渲染），则可以使用 JavaScript 来实现。请参阅loadCSS项目以获取一些好的文档和示例。

通常，以标准方式（例如<link href="path/to/mystylesheet.css" rel="stylesheet">）包含的所有 CSS 文件实际上都会阻止页面渲染，直到所有样式表完成加载。这是出于浏览器良好的性能原因，以防止在每个样式表完成加载后加载页面时进行多次重新布局和重新绘制。

此解决方案的想法基本上是将非关键样式表的媒体类型更改为浏览器认为对页面渲染不重要的内容（例如“仅x”），然后手动将媒体类型切换回标准“全部”（或根据需要的其他值），这可能是在资源完成加载之后，但如果需要的话，可以根据您的用例进一步推迟。

只要您只需要支持相对现代的浏览器，这种方法就相当可靠。我已在制作具有数百万浏览量的内容时使用它。您也许可以使用链接标头实现类似的功能，但您仍然需要一些客户端脚本来检测资源何时完成加载并将媒体类型切换回“全部”。