Awesome
async-css-loading
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<head>
Link in <body>
<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
Attribute toggle using JavaScript
<link>togglesmediaattribute- 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 togglesrelattribute- Source code
- Demo
- subject to currently limited
preloadbrowser support
- Using
<link rel="preload">withfilamentgroup/loadCSSpolyfill- Source code
- Demo
- subject to loadCSS browser support
JavaScript created <link>
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
Extra
Dependencies
Uses a styles.php to add a sleep() call to the stylesheet so that it loads slower.