Question

使用Firefox Quantum我发现了一个＆＃34;故障＆＃34;加载一些网站的CSS。

其中一个是my company's website：

或Github：

在第一篇文章中，我们页面的<head>部分只有一个CSS文件。

似乎 - 仅在Firefox Quantum中 - CSS不会阻止页面as it should的呈现。对于某些时刻，页面的其余部分在没有CSS的情况下加载，然后应用CSS就好像它是异步加载一样（但它不是）。

显然，这种行为并非在我访问过的所有网站中发生过。

我真的不知道发生了什么：）

Answer 1

要总结来自bug 1404468的信息，通常是在加载样式表之前，某些人根据样式要求信息时，发生“未样式化内容的闪烁”（“ FOUC”）：

force layout/style recalc页面上的脚本，该脚本在加载样式表之前执行。
- recommended是“放入所有样式，并确保所有要求布局信息的脚本都位于样式之后”。
- 请注意may execute before the stylesheets are loaded（spec bug）的defer脚本。
An iframe that loads faster than parent page's stylesheets出于复杂原因而强制设置父页面的布局，如错误所描述。
插件（example），要求在样式加载完成之前（例如，在run_at: "document_end"上）要求提供布局信息。 Firefox 60（2018-05-09）fixed带有使用run_at: "document_idle"查询布局的插件，并且大约在同一时间修复了一些插件。
Firefox使用autofocus的网站上有bug导致它，特别是GitHub。在Firefox 60中也已修复。

本身不会导致FOUC的因素，但可以增加它被显示的机会：

Firefox 53 reduced nglayout.initialpaint.delay（假设当时HTML尚未完全加载，则该页面在被样式表阻止后会延迟页面的初始绘制）从250ms到5ms。
- 如果导致FOUC的样式表恰好在延迟之前加载，您将看不到未样式化的内容。用5毫秒，它变得不太可能了。
- 如果HTML页面本身加载缓慢，您可能会看到一些内容在页面上跳跃的可能性更大。
网络速度慢，加上上述因素，增加了查看FOUC的机会。

最后，通常会看到网页上的字体“升级”为页面提供的网页字体，因为它们不会按设计阻止初始渲染。

Answer 2

对我有用的快速修复（来自bug 1404468中的vrancken.gilbert）：

<body>
<script>0</script>
<!-- Your code ... -->
</body>

（...），如果您在标签FF之后添加了虚拟脚本，则只会在加载CSS时呈现页面。

其他信息：

如果您在应用程序中管理内容安全策略（CSP）（防止内联脚本），则必须将此行列入白名单：

例如：

在您的应用程序中：

<script nonce="JwkbSbZ2MYNwp5Adp8Nk">0</script>

在“内容安全策略” HTTP标头中：

(...) script-src 'self' 'nonce-JwkbSbZ2MYNwp5Adp8Nk'

Ref：MDN