Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

问题

I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.

This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.

It's also worth noting (perhaps?) that the page is using @font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.

I've tried a few different things, to no effect:

Rearranging order of CSS stylesheet links
Removing link to stylesheets with @font-face
Disabling Firebug? (Read on here somewhere...)

One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?

This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.

So this leads me to believe that there is some issue with how the CSS is being loaded.

Here is my HEAD code:

<!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 is going wrong with Firefox? It's driving me nuts!

回答1:

If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:

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

There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468

回答2:

I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.

By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.

回答3:

I've had the same issue. In my case removing @import rule in the CSS file and linking all the CSS files in the HTML resolved it.

回答4:

In my case the reason of FOUC in FF was the presence of iframe on page. If I removing iframe from markup then FOUC disappears.

But I need iframe for my own hacking reasons so I changed this

<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>

into this

<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>

I've added this inline JS right in template just for readability: in my case this code runs once per page. I know that it's dirty hack, so you can add this code in separated JS-file.

The problem was in Firefox Quantum v65.

回答5:

Filament Group share they way they load their fonts in detail,

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

which is a nice modern approach to @font-face loading

Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.

A gist can be found at:

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

The original article detailing their decision can be fount at:

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

Additional recommendation

The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.

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

回答6:

For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.

To be precise, in my code I accidentally closed the HTML tag too early, like this:

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

The code provided by the original poster is missing the opening <html> so I suspect that's probably whats happening there.

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

标签

css

firefox

stylesheet

font-face

fouc