Question

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

这甚至发生在后续的页面加载中，其中所有内容都应该被缓存 - 每次页面加载时我都会看到非常规内容的瞬间，然后一切都安定下来。

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

我尝试了几件不同的事情，但没效果：

重新排列CSS样式表链接的顺序
使用@ font-face
禁用Firebug？（请在这里阅读...）

值得一提的另一件事是我在页面的CSS中使用了很多元素类型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出错了？这让我疯了！

Answer 1

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

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

Answer 2

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

Answer 3

如果您在<script>之后添加虚拟<body>标签，则Firefox将在加载<head>中的所有CSS之后显示页面：

<body>
   <script>0</script>
   <!-- rest of the code -->
</body>

Firefox网站https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

上有关于此FOUC（未样式化内容的闪烁）的官方错误报告。

Answer 4

在控制台上显示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显然消失了），但控制台可能仍显示相同的警告。

Answer 5

Filament Group分享他们详细加载字体的方式，

http://www.filamentgroup.com/lab/font-loading.html

这是一个很好的现代方法@ font-face loading

Smashing杂志还审查了网站的性能，并提出了一个不同的解决方案，将缓存存储在本地存储中的base64副本。此解决方案可能需要不同的许可证字体。

可以在以下网址找到要点：

https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7

原始文章详细说明了他们的决定，可以通过以下方式获得：

http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts

其他建议

文档的头部包含很多单独的样式表，所有这些css文件应该合并为一个文件，缩小和gziped。您可以在主样式表之前放置第二个字体链接。

<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />

Answer 6

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

Answer 7

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

准确地说，在我的代码中，我不小心关闭了HTML标签，就像这样：

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

原始海报提供的代码缺少开头<html>，因此我怀疑那里可能正在发生这种情况。

Answer 8

以防它对任何人有帮助 - 看起来我遇到了 this problem。

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

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

仅在Firefox中使用无格式内容（FOUC）的Flash？ FF缓慢渲染？

8 个答案:

其他建议