Firefox和Safari Mac不支持预加载CSS文件

Question

我将属性rel =“ preload”添加到所有这样的CSS链接中：

   <link rel='preload' onload='this.rel="stylesheet"' as='style' 
id='reworldmedia-style-css'  href='style.css' type='text/css' media='all' 
/>

它在Chrome浏览器中工作正常，但在Safari或Firefox中无法正常运行

Answer 1

~~对于 Firefox，它仅在Firefox 56 Nightly 中受支持。将于2017年9 月 26 日发货。你可以从这里下载。~~

更新：此功能降落在FF 56，但在57去除这里的原因是：

此功能在 Firefox 56 中可用，但仅适用于可缓存资源。由于各种网络兼容性问题（例如错误 1405761），它已在 Firefox 57 中被禁用。适用于不可缓存资源的改进版本预计将登陆 Firefox 59

Answer 2

我发现可能最好的解决方案是按以下方式加载两个文件-支持预加载的浏览器将按预期使用它，而不支持预加载的浏览器（如Firefox）将仅使用常规（第二个链接）。此解决方案不需要使用，onload="this.rel='stylesheet'"因为样式是在预加载之后立即使用的：

<head>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>

我还发现是上述内容的替代方案，可能包括两次“ rel”，例如：

<link href="style.css" rel="stylesheet" rel="preload" as="style">