Stylesheets do not only block rendering but also JavaScript execution
- Published at
- Updated at
- Reading time
- 1min
This post is part of my Today I learned series in which I share all my web development learnings.
Today I learned that when you have the following snippet...
<link rel="stylesheet" href="app.css" />
<script>
var script = document.createElement('script');
script.src = "analytics.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
... the inline JavaScript code snippet won't be executed before the stylesheet is loaded. When you think about that, this makes a lot of sense because it may be that the JavaScript will access elements and any style-related values. I never thought about it, though.
All kudos to Harry Roberts who described this behavior in an excellent article. Thanks Harry!