The Async CSS Loader Experiment

Script placement: End of body tag
Execution: Immediately, with no timeout
Observed results: Mixed. Renders immediately, as desired, in Firefox (version 34, late 2014). However, in Chrome (version 39, late 2014), Safari (version 8.01, late 2014), and IE (all tested versions, 6 through 11), the page does not render until the CSS file is loaded, although script in body is not blocked from execution.; Re-testing in 2022, Chromium browsers have changed such that the page is not blocked by the linked stylesheet (version 102); however, Safari (version 15.5) still blocks page render (but not the script execution) during this wait.

This page dynamically inserts via JavaScript running at the end of <body> a <link rel=stylesheet /> element into the <head>. The linked stylesheet should take slightly over 5 seconds to load.

Because CSS is blocking, and the link is inserted during the initial parse of the page, browsers will not render anything until the CSS is loaded. You can tell whether or not the CSS file is loaded using the indicator below, or by virtue of this text being italic

CSS loading indicator:

Not yet loaded.

A script embedded in this paragraph was executed (but not necessarily rendered) seconds after this small HTML page downloaded. (Technically, after it began downloading, but it is such a small file that it is essentially, usually instantaneous.) Values close to 0 indicate that the stylesheet was not requested in a blocking manner; values over 5s indicate that it was.

return to test suite · tests by alan hogan