HTML & CSS: The Good Parts

Browsers, Parsing, and Rendering

Current web browsers typically parse and render content piecemeal, quite often starting the process before a page has been received in full by the browser. HTML browsers—or more generically, user agents—will process an HTML or XHTML document serially from the beginning of a document’s source, working out the relationships between the various elements it contains and filling in gaps if necessary to create a document tree. Meanwhile, they read any CSS specified by the HTML in a similar fashion, matching up stylesheet selectors to the elements contained in the page as described in the next chapter.

The serial nature of these processes is important for three reasons:

The only way in which user intervention can affect parsing is to halt it

The markup, CSS, JavaScript, session data, and user data received by the browser in the scope of a single page set the stage for everything that happens until the page is completely rendered.

Until a page and its related media are completely received, parsed, and rendered, their appearance is subject to change at the hands of the browser’s rendering engine

In high-latency environments, slow arrivals can create visually disconcerting results as the page shifts over time to accommodate recently arrived components. This behavior can lead to the dreaded “Flash of Unstyled Content,” which is explored briefly on this book’s companion website.

There is no strict rule as to what a web browser should or should not parse, ...