Issue link: https://read.uberflip.com/i/1146286
What's a Frontend Engineer to Do? | 43 Flash of Unstyled Content The blank white screen phenomenon is due to browser behavior. Remember that our stylesheet wasn't even used to render the page—only to affect the DHTML feature for sending email messages. Even when Internet Explorer had all the necessary com- ponents, it waited to render them until the unnecessary stylesheet was also down- loaded. The location of the stylesheet in the page doesn't affect download times, but it does affect rendering. David Hyatt has a great explanation of why the browser does this. * If stylesheets are still loading, it is wasteful to construct the rendering tree, since you don't want to paint anything at all until all stylesheets have been loaded and parsed. Otherwise you'll run into a problem called FOUC (the flash of unstyled content prob- lem), where you show content before it's ready. The following example demonstrates this problem. CSS Flash of Unstyled Content http://stevesouders.com/hpws/css-fouc.php In this example, the document uses one of the CSS rules from the stylesheet, but the stylesheet is (incorrectly) placed at the bottom. When the page loads progressively the text is displayed first, followed by the images as they arrive. Finally, when the stylesheet is successfully downloaded and parsed, the already-rendered text and images are redrawn using the new styles. This is the "flash of unstyled content" in action. It should be avoided. The blank white screen is the browser's attempt to be forgiving to frontend engi- neers who mistakenly put their stylesheets too far down in the document. The blank white screen is the foil of the FOUC problem. The browser can delay rendering until all the stylesheets are downloaded, causing the blank white screen. By contrast, the browser can render progressively and risk flashing the user. Neither choice is ideal. What's a Frontend Engineer to Do? So how can you avoid both the blank white screen and the flash of unstyled content? In the "CSS Flash of Unstyled Content" example, the flash doesn't always happen; it depends on your browser and how you load the page. Earlier in this chapter, I explained that the blank white screen happens in Internet Explorer only when the page is loaded in a new window, as a reload, or as a home page. In these cases, Inter- net Explorer chooses the blank white screen. However, if you click on a link, use a bookmark, or type a URL, Internet Explorer chooses the second alternative: risking FOUC. * David Hyatt, "Surfin' Safari" blog, http://weblogs.mozillazine.org/hyatt/archives/2004_05.html#005496.