async-css-loading

October 26, 2017 · View on GitHub

Current state of the art is filamentgroup/loadCSS. Every other individual test below has major limitations in at least one modern browser.

Default (always blocks)

<link> in middle of <body>
- Source code
- Demo
- blocks in Chrome, Chrome for Android, Mobile Safari
<link> at the end of <body>
- Source code
- Demo
- blocks in Chrome, Chrome for Android, Mobile Safari

Related Chromium issue: #481122 Allow the page to render before <link> tags in body

<link> toggles media attribute
- Source code
- Demo
- never applied in Android ≤ 4.3, <link onload> not supported
Using filamentgroup/loadCSS
- Source code
- Demo
- subject to loadCSS browser support
Using <link rel="preload"> and toggles rel attribute
- Source code
- Demo
- subject to currently limited preload browser support
Using <link rel="preload"> with filamentgroup/loadCSS polyfill
- Source code
- Demo
- subject to loadCSS browser support

For browsers obeying the HTML5 specification, these should not block render.

document.createElement("link") in <body>
- Source code
- Demo
- blocks in Mobile Safari
document.createElement("link") in <head>
- Source code
- Demo
- blocks in Mobile Safari

Related WebKit issue: #88869 renderer should not block on script-inserted stylesheets

Uses a styles.php to add a sleep() call to the stylesheet so that it loads slower.