The FOUC Problem

https://www.webkit.org/blog/66/the-fouc-problem/

The FOUC Problem

Posted by Dave Hyatt on Friday, September 1st, 2006 at 10:59 pm

FOUC stands for Flash of Unstyled Content. This situation occurs whenever a Web browser ends up showing your Web page’s content without having any style information yet. It’s an interesting technical problem, because when/how a browser ends up committing the crime of FOUCing depends heavily on how the browser’s engine is architected and on interesting assumptions made by Web site authors when designing their sites.

When a browser loads a Web page, it first fetches an HTML file from the Web site. As that HTML file is downloaded from the Web site, the browser engine begins to feed the file’s contents to its HTML parser. The browser engine builds up a tree that represents the structure of the Web page (the DOM tree) as it encounters elements and nodes in the file. At some point while parsing, the engine is going to hit a stylesheet loading directive, either inside a