CSS 不会阻止 Firefox Quantum 上的渲染
Posted
技术标签:
【中文标题】CSS 不会阻止 Firefox Quantum 上的渲染【英文标题】：CSS doesn't block rendering on 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 reducednglayout.initialpaint.delay（在页面停止被样式表阻止后延迟页面的初始绘制，假设此时 HTML 尚未完全加载）从 250 毫秒到 5 毫秒。
如果导致 FOUC 的样式表恰好在延迟之前加载，您将看不到未设置样式的内容。 5 毫秒后，这种可能性就大大降低了。
如果 HTML 页面本身加载缓慢，您可能会看到一些内容在页面周围跳跃的可能性更大。
慢速网络加上上述因素增加了看到 FOUC 的机会。
最后，通常会看到网页上的字体“升级”为页面提供的网页字体，因为它们不会按设计阻止初始呈现。
【讨论】：
以上是关于CSS 不会阻止 Firefox Quantum 上的渲染的主要内容，如果未能解决你的问题，请参考以下文章
当 CSS 链接在头部时，Firefox 不会阻止 HTML 的呈现
史上最好的浏览器Firefox Quantum（Firefox 57）？