The Async CSS Loader Experiment

Script placement: End of body tag
Execution: with a zero-second setTimeout
Observed results: As desired: Render is not blocked

This page dynamically inserts, after a zero-millisecond “timeout,” 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.

CSS is blocking, but since we don’t have the link until after the rest of the DOM and asset references have been downloaded and parsed, the expectation is that this page will immediately render, and after 5 seconds or more, the CSS loading indicator (below) will change to reflect that the CSS file has been loaded, and the text will become italicized.

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