Stylesheets do not only block rendering but also JavaScript execution
Written by Stefan Judis
- 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. It seems strange at first, but when you think about it, this behaviour makes a lot of sense because it may be that the JavaScript will access some element styles.
All kudos to Harry Roberts who described this behavior in an excellent article. Thanks Harry!
If you enjoyed this article...
Join 6k readers and learn something new every week with Web Weekly.
Reply to this post and share your thoughts via good old email.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.