php - 可以通过 http LINK header 延迟 CSS 文件加载并阻止渲染吗

Question

如果我们使用 http link header尽早提供指向 CSS 文件的链接，哪些浏览器不会下载此链接，是否有任何浏览器以这种方式提供 CSS 文件会阻止呈现“首屏内容”？

这将是 HTTP header :

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

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

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

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

Answer 1

提前致歉，我的回复没有直接提及使用 http 链接 header 。如果目标是尝试异步加载非关键 CSS(在后台不阻塞页面渲染)，这可以通过 JavaScript 实现。查看loadCSS一些好的文档和示例的元素。

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

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

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