Flash of Unstyled Content (FOUC) explained
Under certain circumstances, Internet Explorer for Windows displays a Web page without styling for a moment before applying stylesheet information. This is referred to as the Flash of Unstyled Content (FOUC). The problem has been known for years, and there are easy workarounds available (see Flash of Unstyled Content at BlueRobot). But Internet Explorer is not the only browser that does this.
Safari also suffers from it, and the workarounds mentioned above do not help. It’s a bit frustrating to see it happening and get bug reports about it but not having any idea what causes it or how to make it go away. But now, after reading Dave Hyatt’s article The FOUC Problem, I think I understand it much better. That doesn’t mean I will be able to do much about it though.
What you as a developer can do to avoid causing FOUC is to make sure your scripts do not access layout properties while a page is loading. It will make your scripts behave better in all browsers:
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 layout/style changes between accesses, it can cripple the load speed of a Web site in every modern browser.
Your next job would be convincing Google to use the improved script instead…
- Previous post: 10 things businesses should know before building a website
- Next post: CSS Frames v2, full-height