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…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2022-12-06T17:02:39+00:00) » Stylesheets do not only block rendering but also JavaScript execution (#tilPost). Retrieved from https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/.
MLA
" » Stylesheets do not only block rendering but also JavaScript execution (#tilPost)." Stefan Judis | Sciencx - Thursday November 15, 2018, https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/
HARVARD
Stefan Judis | Sciencx Thursday November 15, 2018 » Stylesheets do not only block rendering but also JavaScript execution (#tilPost)., viewed 2022-12-06T17:02:39+00:00,<https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Stylesheets do not only block rendering but also JavaScript execution (#tilPost). [Internet]. [Accessed 2022-12-06T17:02:39+00:00]. Available from: https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/
CHICAGO
" » Stylesheets do not only block rendering but also JavaScript execution (#tilPost)." Stefan Judis | Sciencx - Accessed 2022-12-06T17:02:39+00:00. https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/
IEEE
" » Stylesheets do not only block rendering but also JavaScript execution (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/. [Accessed: 2022-12-06T17:02:39+00:00]
rf:citation
» Stylesheets do not only block rendering but also JavaScript execution (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2018/11/15/stylesheets-do-not-only-block-rendering-but-also-javascript-execution-tilpost/ | 2022-12-06T17:02:39+00:00
https://github.com/addpipe/simple-recorderjs-demo