除了在 Google Chrome 上之外，CSS 预加载不起作用答案

【问题标题】：CSS preloading doesn't work except on Google Chrome除了在 Google Chrome 上之外，CSS 预加载不起作用
【发布时间】：2019-11-28 04:34:28
【问题描述】：

我正在尝试预加载 CSS，它在 Chrome 上运行良好，但在 Firefox（也不是 Edge）上运行良好，我在任何地方都找不到解决方案。

我在 Google Chrome 74.0.3729.131 和 Firefox 66.0.5（以及 Edge 41.16299.1004.0）上进行了测试。

这在任何地方都可以正常工作。

<link rel="stylesheet" href="/style.css" media="all" type="text/css" />

但这在 Chrome 上不起作用。

<link rel="preload" href="/style.css" as="style" media="all" type="text/css" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/style.css" media="all" type="text/css" /></noscript>

我看到 CSS 已收费但未加载，因此 javascript 函数无法工作（我想找到真正的原因和解决方案，而不是使用 onerror javascript 事件绕过问题）。

【问题讨论】：

“行不通”是什么意思？另外，为什么要更改 rel 值？你到底想做什么？
当我说“行不通”时，没有应用 CSS。我正在尝试通过预加载此 CSS 等文件来优化网站的速度。所以我尝试关注Google's web development documentation，这适用于他们的 Google Chrome，但适用于 Mozilla Firefox：CSS 仅适用于 Chrome。

标签： javascript html css preload

【解决方案1】：

去年 Chrome Firefox 出现问题，网络浏览器对文档上的脚本有不同的软件解释我不得不重写脚本通过 w3c val 输入您的网站，您可以找到答案 https://validator.w3.org

约翰

【讨论】：

我刚刚尝试过这个，但我没有任何错误，我唯一的错误是图像缺少 src 属性，因为我使用了延迟加载。
我不关心 rel 属性，我关心 CSS 预加载，我已经知道 rel 属性并且我正在使用它。
什么是网站马
嗨，您在外部 css 文件和另一个资源之间有一个内联脚本块 chrome 会忽略它 Firefox 没有它可能有助于在子域中放入另一个 css，而不是从主站点链接到子域如果是我的网站我会重写脚本
这是我能做到的，希望其他人能给你更好的帮助和建议

【解决方案2】：

经过测试，似乎在 Firefox 和 Chrome 中运行良好在脚本中删除 4 个位置

【讨论】：

【解决方案3】：

根据solution，您需要使用两行声明样式，第二行是 Firefox 的后备（第二行）：

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

据记录，Firefox 不支持 preload。

【讨论】：