Deep dive into FOUC

| permalink | css, html

If you're familiar with CSS, you will have heard of FOUC (Flash of Unstyled Content) which is when the webpage "flashes" briefly before all the styling is loaded and parsed.

However, how exactly does the mechanism behind this phenomenon work? How can we prevent if from happening?

Not in some sort of vague, "these are the best-practices" way, but detailed explanation of exactly what will trigger it and what won't.

Well, it turns out different browser handle it differently.

First Contentful Paint

The issue with FOUC is really more about FCP (First Contentful Page) which is when browser will render the first iteration of the web page that the user will see.

During my search, I've found an explanation here, which sourced its info from here.

Brief summary:

All current browsers already have a render-blocking mechanism: after navigation [editor: I believe meaning navigating to the page], the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated (or a UA-defined timeout is reached). This prevents a Flash of Unstyled Contents (FOUC) and ensures critical scripts (like framework code) are executed, so that the page is usable after the first rendering cycle.

Script-blocking stylesheet and stylesheet blocking script

Synchronous scripts forces stylesheets declared before it to finish loading before proceeding, while stylesheets can be declared in a way as to block scripts until they finish loading.

At the same time, stylesheets in <head> will block rendering until they are completely parsed and loaded.

Gecko

WebKit

Blink

Blocking attribute