CSS文件加载是否可以通过HTTP LINK头进行延迟，这样做是否会阻止渲染？

Question

12

如果我们使用http链接头在很早的阶段提供CSS文件的链接，哪些浏览器不会下载此链接？是否有浏览器以这种方式提供CSS文件会阻止呈现“above the fold content”？这是HTTP标头：

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

这是一个未经测试的 PHP 实现，用于实现与上面链接中提到的类似功能（如果没有配置 Apache 以执行此操作）：

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

问题：跨浏览器兼容性和呈现阻塞行为。

- C.O.

一个月内有14次浏览 - 让我们来设置赏金... - C.O.

2个回答

-3

我不确定您是否可以使用header()函数来实现这一点，但是可以使用JavaScript实现非阻塞css - 请参见此粘贴：http://pastebin.com/TYcnb99m

它使用本地存储作为已加载的css文件的缓存，并且是非阻塞的。

更多链接：

希望这能有所帮助。

- t1gor

我已经在使用非阻塞的CSS了。问题明确要求关于HTTP头部Link的内容。你发帖中的任何材料都与此无关。我向撰写该帖的人表示热情的问候，但由于不匹配，我会给答案点个踩。 - C.O.

1

嗯，我肯定明白这个问题。我的回答基于浏览器支持的缺乏和这是一个建议标准的事实。考虑到上述所有因素，再加上这种技术对新手/新员工来说需要相当长的时间来理解，我不建议这样做。 - t1gor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- munsellj · Accepted Answer

提前道歉，我的回答并不是关于使用http链接头的直接参考。如果目的是尝试异步地加载非关键CSS（在后台加载而不阻塞页面呈现），可以使用JavaScript实现。请参见loadCSS项目的一些良好文档和示例。

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

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

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