如果我们使用
http link header提供一个链接到CSS文件很早,什么浏览器不会下载这个链接,有没有一个CSS文件提供这样的浏览器将阻止渲染“上面的折叠内容”？
这将是HTTP标头：
Link: <style.css>; rel="stylesheet"
这是一个未经测试的PHP实现的同样的事情(如果没有配置apache做它像在上面的链接中提示)：
<?PHP
header('Link: <style.css>; rel="stylesheet"');
?>
问题：跨浏览器的兼容性和渲染阻止行为
提前道歉,我的回复不直接参考使用http Link标题.如果目标是异步地尝试加载非关键的CSS(在后台没有阻止页面呈现),这可以通过JavaScript实现.有关一些良好的文档和示例,请参阅
loadCSS项目.
通常,以标准方式(例如< link href =“path / to / mystylesheet.css”rel =“stylesheet”>)包含的所有CSS文件实际上阻止页面呈现,直到所有样式表完成加载.为了在浏览器完成加载后加载页面时,为了防止多次重新布局和重新绘制,这是为了良好的性能原因.
该解决方案的想法基本上是将非关键样式表的媒体类型更改为浏览器将看到的不重要的页面呈现(例如“只有x”),然后手动将媒体类型切换回标准“全部”(或需要的其他值),这可能在资源完成加载之后,但如果需要,可以根据您的用例进一步推迟.
只要您只需要支持相对较现代的浏览器,这种方法非常可靠.我已经在生产中使用了具有数百万页面浏览量的内容.您可能可以使用Link标头实现类似的操作,但是您仍然需要一些客户端脚本来检测资源何时完成加载并将介质类型切换回“all”.