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. 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!
Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 6 days ago.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 6 days ago.