One thing that improves the experience of viewing a web document is progressive rendering, where browser displays the parts that have arrived while waiting for other requested parts to arrive. In the early days of the web, when dial-up access was common and documents had little styling, this was a big UX win: the user could be reading an early part of the document while the later parts continued to load.
But one negative thing associated with progressive rendering is a phenomenon called flash of unstyled content (FOUC). This happens when one part of the document loads, and then another part loads that drastically changes the appearance of an earlier part. This could be a style sheet, a web font, a background image, or the changes that a script makes in the name of progressive enhancement.
- A style sheet will cause elements in the document to assume the
position:, dimensions, colors, and other appearance aspects dictated by the style sheet.
- A web font may have metrics (sizes of glyphs) that differ from the generic font, such as
serif, that the browser uses while the web font loads. The difference in metrics causes the text to reflow, which moves inline elements such as links and can also move boxes up or down as the preceding text takes fewer or more lines.
- A background image may cause the color of the text in front of it to switch in and out of readability if the style sheet provides no fallback color.
- A script may remove controls intended for no-script users and replace them with controls intended for script users.
So to avoid the negative experience associated with FOUC, browsers include heuristics to delay rendering until certain important resources have loaded. For example, a browser won't render past a
<script> until it loads; placing a script in the
<head> element will pause rendering until it has loaded. A web document may exploit these anti-FOUC heuristics by covering the partially loaded document with a full-page ad until the rest of the document has loaded. In a way, hiding a partially loaded document actually improves the experience by presenting an ad that animates smoothly rather than the less intuitive jumping of a progressively loading document.