36

我在我测试过的任何其他浏览器（IE、Chrome、Opera）中都没有看到这个问题，但是每当我从服务器加载页面时，我都会在应用 CSS 之前看到一闪而过的无样式内容。

这甚至发生在应该缓存所有内容的后续页面加载中 - 每次页面加载时，我都会在一瞬间看到无样式的内容，然后一切都解决了。

还值得注意（也许？）该页面正在使用 @font-face 来提取一些 Google 字体。它们存储在一个单独的样式表中，在主响应式样式表和媒体查询之后被拉出。

我尝试了一些不同的东西，但没有效果：

  • 重新排列 CSS 样式表链接的顺序
  • 使用@font-face 删除样式表的链接
  • 禁用萤火虫？（请在此处阅读……）

可能值得一提的另一件事是，我在页面的 CSS 中使用了相当多的 Element Type CSS 选择器。这可能会减慢渲染过程吗？

这似乎不太可能，因为在更改窗口尺寸后立即重新渲染页面没有问题 - 响应式内容立即呈现良好。

所以这让我相信 CSS 的加载方式存在一些问题。

这是我的头代码：

<!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 出了问题？快把我逼疯了！

4

8 回答 8

33

如果您在<script>之后添加一个虚拟标签<body>，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

于 2019-09-11T11:37:04.907 回答
11

我遇到了这个错误。一位同事说这是由属性引起的，autofocus被添加到表单字段中。

通过删除此属性并使用 JavaScript 设置焦点，无样式内容的短暂闪烁停止发生。

于 2017-11-27T14:35:30.517 回答
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 明显消失），但控制台可能仍会显示相同的警告。

于 2020-10-01T15:00:37.810 回答
5

我有同样的问题。在我的情况下，删除@importCSS 文件中的规则并链接 HTML 中的所有 CSS 文件解决了它。

于 2015-05-05T17:32:09.617 回答
5

对于它的价值，我遇到了同样的问题，发现它是由格式错误的<html>...</html>标签引起的。

准确地说，在我的代码中，我不小心过早关闭了 HTML 标签，如下所示：

<!DOCTYPE html>
<html lang="en"></html>
<head>
  <title>My title</title>

原始海报提供的代码缺少开头<html>，所以我怀疑这可能是那里发生的事情。

于 2018-06-19T17:03:04.390 回答
3

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" />
于 2015-04-14T09:14:03.960 回答
3

就我而言，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 中。

于 2019-03-05T15:40:34.173 回答
-2

万一它对任何人都有帮助 - 看起来我遇到了这个问题。

基本上，只有在您打开控制台/检查器时才会出现问题。关闭它，它就会消失。

我想这可能不是每个人的情况——听起来这里可能有几个问题——但仅供参考，这可能不是一个真正的问题。:-)

于 2021-02-14T12:37:34.500 回答