使用 Firefox Quantum，我注意到加载某些网站的 CSS 时出现“故障”。
其中之一是我公司的网站：
或者 Github 也是：
在第一个中，我们<head>的页面部分中只有一个 CSS 文件。
似乎——仅在 Firefox Quantum 中——CSS 并没有像它应该那样阻止页面的呈现。页面的其余部分在没有 CSS 的情况下加载了一段时间，然后应用 CSS，就好像它异步加载一样（但事实并非如此）。
显然，这种行为不会发生在我访问的所有网站中。
我真的不知道发生了什么:)
1041 次
2 回答
3
总结bug 1404468中的信息，“无样式内容的闪烁”（“FOUC”）通常发生在加载样式表之前根据样式请求信息时：
- 页面上强制布局/样式重新计算的脚本，在加载样式表之前执行。
- 建议“将所有样式放入并确保任何要求布局信息的脚本都在它们之后” 。
- 注意
defer脚本，它可能在加载样式表之前执行（规范错误）。
- 一个
iframe比父页面的样式表加载速度更快的情况会出于复杂的原因强制父页面的布局，如错误中所述。 - 在样式完成加载（即 on ）之前询问布局信息的插件（示例
run_at: "document_end"）。Firefox 60 (2018-05-09)修复了 FOUC 与使用 查询布局的插件run_at: "document_idle"，并且在同一时间修复了一些插件。 - Firefox 有一个错误导致它出现在带有 .的网站上
autofocus，尤其是 GitHub。也在 Firefox 60 中修复。
本身不会导致 FOUC，但会增加其可见机会的因素：
- Firefox 53从 250 毫秒减少
nglayout.initialpaint.delay到 5 毫秒（假设 HTML 到那时还没有完全加载，它会在页面停止被样式表阻止后延迟页面的初始绘制）。- 如果导致 FOUC 的样式表碰巧在延迟之前加载，您将看不到未设置样式的内容。使用 5 毫秒，它变得不太可能。
- 如果 HTML 页面本身加载缓慢，您可能会看到一些内容在页面周围跳跃的可能性更大。
- 缓慢的网络结合上述因素增加了看到 FOUC 的机会。
最后，通常会看到网页上的字体“升级”为页面提供的网页字体，因为它们不会按设计阻止初始呈现。
于 2019-08-27T13:30:29.140 回答
1
对我有用的快速修复（来自错误 1404468 中的vrancken.gilbert）：
<body>
<script>0</script>
<!-- Your code ... -->
</body>
(...) 如果您在标签 FF 之后添加一个虚拟脚本，则只会在加载 CSS 时呈现页面。
附加信息：
如果您在应用程序中管理 Content-Security-Policy (CSP)（防止内联脚本），则有必要将此行列入白名单：
例如 ：
在您的应用程序中：
<script nonce="JwkbSbZ2MYNwp5Adp8Nk">0</script>
在您的“内容安全策略”HTTP 标头中：
(...) script-src 'self' 'nonce-JwkbSbZ2MYNwp5Adp8Nk'
参考：MDN
于 2019-11-22T07:46:22.577 回答