FOUC Problem
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.
Expectation vs Reality
It’s an interesting technical problem because when 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 Website. As that HTML file is downloaded from the Website, 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 <style> block or in a <link> element.
It is at this point that things get interesting. The browser engine now has a choice to make. It can either stall the parsing process while it waits for the remote stylesheet to load, or it can plunge bravely ahead.
Solution
The ideal technical solution to this problem involves on-demand stalling. In this approach, the engine still parallelizes loads and doesn’t stall parsing. However, if a layout or style property is accessed, the JavaScript engine suspends itself and awaits the load of any pending stylesheets. Once all the stylesheets have loaded, the script picks up where it left off.
The hurdle with this approach is that you have to be able to halt scripts mid-execution and resume them later. A technically inferior solution might be to just stall the execution of *all* scripts, but given the preponderance of script elements on most Web sites, that approach is really not much better than stalling all the time.
Why it matters?
The FOUC problem would normally be a minor occurrence. However with the advent of Google AdSense, FOUC has become a Safari epidemic. Because these Google ads not only execute inline script but access layout information that they often don’t even end up using on the page, the problem of FOUC is much more severe than it should be.
It is poor coding to access style/layout information repeatedly during the loading cycle of a page because, in order for the engine to supply you with an answer, it has to ensure that its layout and style are up to date. Think of every use of a property like offsetWidth as a bottleneck that stalls Web page display while the engine computes an accurate snapshot of the entire page just to give the script a correct answer. If a script accesses such properties repeatedly while making numerous other layouts/style changes between accesses, it can cripple the load speed of a Website in every modern browser.
