CSS 不会阻止 Firefox Quantum 上的渲染答案

【问题标题】：CSS doesn't block rendering on Firefox QuantumCSS 不会阻止 Firefox Quantum 上的渲染
【发布时间】：2018-07-09 01:31:54
【问题描述】：

在使用 Firefox Quantum 时，我注意到加载某些网站的 CSS 时出现“故障”。

其中之一是my company's website：

或者 Github：

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

似乎——仅在 Firefox Quantum 中——CSS 不会阻止页面 as it should 的呈现。页面的其余部分在没有 CSS 的情况下加载了一段时间，然后应用 CSS，就好像它异步加载一样（但事实并非如此）。

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

我真的不知道发生了什么:)

【问题讨论】：

过去经常发生这种情况，其实我不知道CSS资源被阻塞了，以为是网络速度解决了这个问题..你经历的等待时间真的很长吗？
嗨@Kaddath 我认为将 CSS 放在文档的部分会阻止呈现。等待时间和我上传的gif一样……
正如我所说，我对阻塞过程的了解不够。无论如何，将<style> 标签放在<head> 中可以有力地保证样式不会延迟应用（html 代码解析是连续的），但我无法确认链接文件。但是，在我的控制台中，<head> 中的主要 CSS 文件已经在 250 毫秒之前加载，您看到的视觉变化可能来自其他东西。顺便说一下，图片的加载时间与 CSS 加载本身是分开的，所以图片是一个完全不同的话题。
对于我使用 Firefox 59.0.2 使用 Craft CMF 创建的网站，我也注意到了这一点，这很烦人。在 Chrome 下不会发生这种情况。
相关错误报告：bugzilla.mozilla.org/show_bug.cgi?id=1404468

【解决方案1】：

对我有用的快速修复（来自bug 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

【讨论】：

【解决方案2】：

总结来自bug 1404468 的信息，“无样式内容的闪现”（“FOUC”）通常发生在加载样式表之前根据样式要求提供信息时：

页面上force layout/style recalc 的脚本在加载样式表之前执行。
- recommended 表示“将所有样式放入其中，并确保所有要求布局信息的脚本都在它们之后”。
- 小心defer 脚本，其中may execute before the stylesheets are loaded (spec bug)。
An iframe that loads faster than parent page's stylesheets 出于复杂的原因强制父页面的布局，在错误中进行了描述。
插件 (example) 在样式完成加载之前询问布局信息（即在 run_at: "document_end" 上）。 Firefox 60 (2018-05-09) fixed FOUC 带有使用 run_at: "document_idle" 查询布局的插件，同时修复了一些插件。
Firefox 有一个 bug 导致它出现在带有 autofocus 的网站上，尤其是 GitHub。在 Firefox 60 中也已修复。

本身不会导致 FOUC，但会增加其可见机会的因素：

Firefox 53 reduced nglayout.initialpaint.delay（在页面停止被样式表阻止后延迟页面的初始绘制，假设此时 HTML 尚未完全加载）从 250 毫秒到 5 毫秒。
- 如果导致 FOUC 的样式表恰好在延迟之前加载，您将看不到未设置样式的内容。 5 毫秒后，这种可能性就大大降低了。
- 如果 HTML 页面本身加载缓慢，您可能会看到一些内容在页面周围跳跃的可能性更大。
慢速网络加上上述因素增加了看到 FOUC 的机会。

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

【讨论】：