css 仅在Firefox中显示无样式内容(FOUC)？FF渲染速度慢吗？

2uluyalo 于 2023-01-14 发布在其他

关注(0)|答案(8)|浏览(186)

在我测试过的任何其他浏览器（IE、Chrome、Opera）中，我都没有看到这个问题，但每当我从服务器加载页面时，我都会在应用CSS之前看到一个未经样式化的内容 Flink 。
这甚至发生在后续的页面加载中，所有内容都应该被缓存--每次页面加载时，我都会看到未经样式化的内容，然后所有内容都稳定下来。
另外值得注意的是，页面使用@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>

火狐怎么出问题了？快把我逼疯了！

css

来源：https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer

8条答案

按热度按时间

xpszyzbs1#

如果你在<body>之后添加一个虚拟的<script>标签，Firefox会在<head>中的所有css加载完毕后显示页面：

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

Firefox网站上有一个关于FOUC（非样式化内容的Flash）的官方报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

赞(0）回复(0）举报 2023-01-14

i2loujxw2#

我遇到了这个错误。一位同事说这是由于属性autofocus被添加到表单域中引起的。
通过删除此属性并使用JavaScript设置焦点，未设置样式的内容将停止短暂 Flink 。

赞(0）回复(0）举报 2023-01-14

piztneat3#

我也遇到过同样的问题：Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.显示在控制台中，页面刷新时可见的非样式化内容 Flink ，不使用（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明显消失），但控制台可能仍会显示相同的警告。

赞(0）回复(0）举报 2023-01-14

tcbh2hod4#

不管怎样，我也遇到了同样的问题，发现这是由于<html>...</html>标记的格式不正确造成的。
准确地说，在我的代码中，我不小心过早地关闭了HTML标记，如下所示：

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

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

赞(0）回复(0）举报 2023-01-14

dgsult0t5#

Filament Group详细分享了他们加载字体的方式，
http://www.filamentgroup.com/lab/font-loading.html
这是一种很好的现代@font-face加载方法
粉碎杂志也审查了网站的性能，并提出了一个不同的解决方案，存储缓存的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" />

赞(0）回复(0）举报 2023-01-14

axzmvihb6#

我也遇到过同样的问题。在我的例子中，删除CSS文件中的@import规则，并链接HTML中的所有CSS文件解决了这个问题。

赞(0）回复(0）举报 2023-01-14

nfg76nw07#

在我的例子中，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中。

赞(0）回复(0）举报 2023-01-14

yqyhoc1h8#

我也遇到过同样的问题（但在Chrome中也是如此）。即使许多现有的答案提供了FOUC原因的线索，我还是想提出我的问题及其解决方案。
正如我所说，我有FOUC在一个相当大的项目，并已有怀疑的种族条件在某种形式。
在项目中使用了SASS，并通过css的“bootstrap”文件，通过导入添加了一个免费的fontawesome包。

@import "@fortawesome/fontawesome-free/css/all.css";

这个导入增加了css文件的总大小很多，这导致文件需要很长时间来加载，浏览器已经加载了下面的javascript。然后执行的JS强制渲染其内容，从而创建FOUC。
因此，我的解决方案是删除大fontawesome包，并通过Icomoon自定义字体插入我使用的图标（~10）。这不仅解决了FOUC问题，而且还有一个很好的副作用，即交付的CSS文件要小得多。

赞(0）回复(0）举报 2023-01-14

我来回答

css 仅在Firefox中显示无样式内容(FOUC)？FF渲染速度慢吗？

8条答案

其他建议

相关问题

热门标签

最新问答