Stylesheets do not only block rendering but also JavaScript execution (#tilPost)

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(‘he…

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!


Reply to Stefan
Print Share Comment Cite Upload Translate
CITATION GOES HERE CITATION GOES HERE
Select a language: