CSS不会阻止Firefox Quantum上的渲染

Question

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

其中之一是我公司的网站：

还是Github：

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

看来-只有在Firefox量子-的CSS不会阻止页面的渲染，因为它应该。页面的其余部分会在某些瞬间不使用CSS加载，然后像异步加载一样应用CSS（但不是）。

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

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

Answer 1

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

页面上强制布局/样式重新计算的脚本，在加载样式表之前执行。
- 建议“将所有样式放入并确保任何要求布局信息的脚本都位于它们之后” 。
- 请小心defer脚本，它们可能会在加载样式表之前执行（规范错误）。
iframe加载速度比父页面的样式表更快，由于复杂的原因强制父页面的布局，如错误中所述。
插件（示例）在样式完成加载（即 on ）之前询问布局信息run_at: "document_end"。Firefox 60 (2018-05-09)使用查询布局的插件修复了run_at: "document_idle"FOUC ，并且大约在同一时间修复了一些插件。
Firefox 有一个错误，导致它出现在带有的网站上autofocus，特别是 GitHub。Firefox 60 中也已修复。

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

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

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