Question

我添加了属性rel =＆＃34; preload＆＃34;对于所有这样的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支持。它将在September 26, 2017上发货。您可以从here下载。~~

更新：此功能在FF 56上登陆，但在57中删除。Here是原因：

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

Answer 2

请参阅can I use。

Firefox不支持它，并将在Safari的下一个版本中添加。

所以你所看到的是预期的行为。

Answer 3

我无法想到比文档本身更具解释性的东西。在caniuse.com网站上有这个http://caniuse.com/#feat=link-rel-preload，如果你按照这个并转到w3c规范就可以找到它。 https://w3c.github.io/preload/明确说明＆＃34;这是一项正在进行中的工作，可能会在没有任何通知的情况下发生变化。＆＃34;也许很快这个＆＃34;草案＆＃34;将得到改进，将增加支持。

Answer 4

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

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

Answer 5

使用loadCSS在浏览器中可靠地预加载

预加载的一个问题是，Firefox和Internet Explorer之类的浏览器（截至2018年11月）不支持它。因此，这些浏览器将不会下载CSS文件，这可能会导致网页的严重显示问题。因此，必须包含用于预加载的JavaScript polyfill-loadCSS。

下载loadCSS JavaScript文件或直接从中复制其JS代码在这里。
在CSS样式表预加载到的地方加载loadCSS polyfill 执行：

<style>
[Your critical CSS goes here]
</style>


<!– Reliably defer loading of non-critical CSS with loadCSS–>
<link rel=“preload” href=”[yourcssfile]” as=“style” onload=“this.onload=null; this.rel=‘stylesheet’”>
<noscript><link rel=“stylesheet” href=”[yourcssfile]” ></noscript>



<!– Inline the loadCSS preload polyfill code or load it via external JS file–>
<script src=“./cssrelpreload.js”></script>

Answer 6

此方法<link rel="preload stylesheet" href="./style.css" as="style">可以指示浏览器尽快下载关键资源。

Answer 7

我有解决方法，这是最有效的网站速度这是默认情况下每个浏览器的普通代码 <link rel="stylesheet" rel="preload" href="css/xyz.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <noscript><link rel="stylesheet" href="css/main.css" /></noscript> 对于mozilla firefox，请使用此代码，当文件在mozilla中运行时，将显示此代码，否则将显示默认的CSS代码<?php if(isset($_SERVER['HTTP_USER_AGENT'])){$agent = $_SERVER['HTTP_USER_AGENT'];} if(strlen(strstr($agent,"Firefox")) > 0 ){$browser = 'firefox';} if($browser=='firefox'){echo '<link rel="stylesheet" href="css/xyz.css" />';}?>

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

7 个答案: