Stylesheets do not only block rendering but also JavaScript execution

1 min read

This post is part of my Today I learned series in which I share all my learnings regarding web development.

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!

Tags

Load time