CSS before JS and white flashes in Firefox?

Question

Google Chrome's page performance audit suggests to put CSS imports before JS imports in the header, to allow for parallel downloading of CSS and JS files.

However, I have noticed that this causes Firefox to clear the window before rendering the new page when navigating to another page. So if I have CSS before JS, Firefox will clear the old page, show a white screen for half a second and then show the new page. If I put JS before CSS, the old page will stay on the screen until it is replaced by the new page. The latter obviously looks much better, since the header stays on screen permanently. Chrome doesn't seem to have these issues.

Is this a known issue? What is the recommended course of action here?

I cannot reproduce this on my websites, where CSS files are loaded before JavaScript files, always. — KittMedia, Mar 02 '16 at 12:44
http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file — nubinub, Mar 02 '16 at 12:44
@nubinub What you are describing sounds like FOUC ([Flash of Unstyled Content](https://stevesouders.com/hpws/css-fouc.php)). I made a little script to counter FOUC if your'e interested. — zer00ne, Mar 02 '16 at 14:38

score 0 · Answer 1 · answered Mar 02 '16 at 15:22

What you are describing sounds like FOUC (Flash of Unstyled Content). I made a script to counter it.

The body has 2 states that are derived from .invisible and .visible classes which are toggled upon load. The .invisible class isn't really necessary unless you'd like a fade out effect on page exit.

function init(t) {
  if (!t) {
    t = 0;
  }
  setTimeout(show, t);
}

function show() {
  document.body.classList.add('visible');
  document.body.classList.remove('invisible');
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.invisible {
  visibility: hiden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<body class="invisible" onload="init(1000);">


  <section style="width: 80vw; height: 80vh; background: blue; padding:15px;">
    <h1 style="font-size: 40px; color: yellow">Title</h1>
    <p style="font-size: 16px; color: white;">Lorem ipsum dolor sit amet, nullam probatus id pri. Et platonem salutatus prodesset has, has vidit oblique feugait id. Tincidunt democritum posidonium quo te. Quo ne iudico saperet dissentias, ea vim expetenda repudiandae, ius id postea sententiae
      instructior. Ex porro explicari mei, nulla constituam sea no, eros adhuc quo id.</p>
  </section>

</body>

CSS before JS and white flashes in Firefox?

1 Answers1