Skip to Main Content
High Performance Web Sites
book

High Performance Web Sites

by Steve Souders
September 2007
Intermediate to advanced content levelIntermediate to advanced
170 pages
4h 24m
English
O'Reilly Media, Inc.
Content preview from High Performance Web Sites

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 components, it waited to render them until the unnecessary stylesheet was also downloaded. 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.[3]

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 problem), 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 engineers who mistakenly ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Even Faster Web Sites

Even Faster Web Sites

Steve Souders
Back-end Performance

Back-end Performance

Bruno Skvorc, Christopher Pitt, Tonino Jankov, Reza Lavaryan, Daniel Berman

Publisher Resources

ISBN: 9780596529307Errata Page