仅在 Firefox 中显示无样式内容 (FOUC)？ FF是慢渲染器吗？
Posted
技术标签:
【中文标题】仅在 Firefox 中显示无样式内容 (FOUC)？ FF是慢渲染器吗？【英文标题】：Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer? 【发布时间】：2014-02-04 11:54:28 【问题描述】：我在我测试过的任何其他浏览器（IE、Chrome、Opera）中都没有看到这个问题，但是每当我从服务器加载页面时，我都会在应用 CSS 之前看到一闪而过的无样式内容.
这甚至发生在后续的页面加载中，所有内容都应该被缓存 - 每次页面加载时，我都会在一瞬间看到无样式的内容，然后一切都解决了。
同样值得注意的是（也许？）该页面正在使用@font-face 来提取一些 Google 字体。它们存储在一个单独的样式表中，在主响应式样式表和媒体查询之后被拉出。
我尝试了一些不同的方法，但没有效果：
重新排列 CSS 样式表链接的顺序 使用@font-face 删除指向样式表的链接 禁用 Firebug？ （请在此处阅读……）可能值得一提的另一件事是，我在页面的 CSS 中使用了相当多的 Element Type CSS 选择器。这可能会减慢渲染过程吗？
这似乎不太可能，因为在更改窗口尺寸后立即重新渲染页面没有问题 - 响应式内容立即渲染良好。
所以这让我相信 CSS 的加载方式存在一些问题。
这是我的 HEAD 代码：
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF 在 Firefox 上出了什么问题？快把我逼疯了！
【问题讨论】：
您粘贴的位不应导致任何无样式内容的闪烁（尽管它可能在理论上会导致尚未使用可下载字体的内容闪烁...但前提是这需要一段时间才能加载）。只是检查一下，您是否看到安全模式下的行为？见support.mozilla.org/en-US/kb/… @BorisZbarsky 感谢您的反馈，我将尝试将字体加载到服务器上，而不是暂时从 Google 中提取它们。不确定安全模式，会调查一下。 好像是***.com/questions/18943276/…的副本 【参考方案1】：Filament Group 详细分享了他们加载字体的方式，
http://www.filamentgroup.com/lab/font-loading.html
这是一种很好的现代@font-face 加载方法
Smashing 杂志还审查了该网站的性能，并提出了一种不同的解决方案，将字体的 base64 副本缓存存储在本地存储中。此解决方案可能需要为您的字体提供不同的许可证。
可以在以下位置找到要点：
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
详细说明他们的决定的原始文章可以在以下位置找到：
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
补充建议
您的文档的头部包含许多单独的样式表，所有这些 css 文件都应该合并到一个文件中，压缩和压缩。您可能在主样式表之前放置了第二个字体链接。
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
【讨论】：
【参考方案2】：我也遇到了同样的问题。在我的情况下，删除 CSS 文件中的 @import 规则并链接 HTML 中的所有 CSS 文件解决了它。
【讨论】：
这是我的问题，我从来没想过把它移到 html... 我认为它有帮助，但在第二次刷新后，消息又出现了..【参考方案3】：我遇到了这个错误。一位同事说这是由属性引起的，autofocus 被添加到表单字段中。
通过删除此属性并使用 javascript 设置焦点，无样式内容的短暂闪烁停止发生。
【讨论】：
我在 Firefox 57.0.1 中遇到了同样的问题，可以确认删除autofocus 解决了这个问题。非常感谢。
如果闪现是autofocus引起的，那么在头部加一个空的<script>标签可以在不去掉自动对焦的情况下解决，见：***.com/questions/21147149/…
看来这个bug会在FF 60中修复：bugzilla.mozilla.org/show_bug.cgi?id=712130
是的，是的！谢谢！由于一个带有自动对焦的小输入文本字段，这一切究竟是如何发生的。我不知道您的朋友是如何发现这与自动对焦相关的，但是哇。谢谢！
我也可以在根本没有任何输入字段的页面上看到此错误消息。 :E【参考方案4】：
不管怎样，我遇到了同样的问题，发现它是由于<html>...</html> 标签格式不正确造成的。
确切地说，在我的代码中，我不小心过早关闭了 HTML 标签，如下所示：
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
原始海报提供的代码缺少开头<html>，所以我怀疑这可能是那里发生的事情。
【讨论】：
【参考方案5】：就我而言，FF 中 FOUC 的原因是页面上存在 iframe。 如果我从标记中删除 iframe，那么 FOUC 就会消失。
但由于我自己的黑客原因，我需要 iframe，所以我改变了这个
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
进入这个
<script>
document.addEventListener('DOMContentLoaded', ()=>
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
);
</script>
我在模板中添加了这个内联 JS 只是为了便于阅读：在我的例子中，这段代码每页运行一次。 我知道这很脏，所以你可以在单独的 JS 文件中添加这段代码。
问题出在 Firefox Quantum v65 中。
【讨论】：
【参考方案6】：如果您在<body> 之后添加一个虚拟的<script> 标签，Firefox 将在加载来自<head> 的所有css 后显示页面：
<body>
<script>0</script>
<!-- rest of the code -->
</body>
在 Firefox 网站上有一个关于这个 FOUC（Flash Of Unstyled Content）的官方错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
【讨论】：
似乎为那些打开检查器并显示控制台警告的人修复它：“在页面完全加载之前强制布局。如果尚未加载样式表，这可能会导致无样式内容的闪烁。” 【参考方案7】：我在控制台中显示Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. 时遇到了同样的问题，并且在页面刷新、没有 (F5) 或清除缓存 (Ctrl + F5) 时可见的无样式内容闪烁。打开开发者工具也没有什么不同。
帮助我的是在 </head> 标记结束之前在脚本中声明一个变量，所以基本上是在所有 <link> 标记之后。
请务必注意，空脚本（或仅带有注释）或任何随机的 JavaScript 都无济于事，但声明变量有效。
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>无需重新排列链接或不在 css 或 js 文件中使用导入。
请注意，该问题将不再可见（FOUC 明显消失），但控制台可能仍会显示相同的警告。
【讨论】：
为我解决了这个问题。甚至警告也不再出现。【参考方案8】：万一它对任何人有帮助 - 看起来我遇到了this problem。
基本上，只有在您打开控制台/检查器时才会出现问题。关闭它，它就会消失。
我想这可能不是每个人的情况 - 听起来这里可能有几个问题 - 但仅供参考，这可能不是一个真正的问题。 :-)
【讨论】：
以上是关于仅在 Firefox 中显示无样式内容 (FOUC)？ FF是慢渲染器吗？的主要内容，如果未能解决你的问题，请参考以下文章