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 Updates
APA

Stefan Judis | Sciencx (2018-11-15T23:00:00+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.