question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HTML script tags are async by default

See original GitHub issue

Hi, I’m using Flems for some code examples on a project’s documentation. Recently my examples broke, apparently because some script tags added in HTML don’t appear to be blocking anymore (the second one executes when the first one is still loading). For example:

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
  
<script>
  console.log(window.$); 
</script>

This logs a function in both a test webpage and on editors like jsfiddle or similar. However on Flems it logs undefined (I actually got the expected result once or twice, I assume it’s not 100% consistent since it looks like a race condition).

(I’m not saying that this is a reasonable way to use jquery, it’s just to provide a minimal case where the issue is reproduced)

I think this is caused by commit 7620dcb4d7c2784a4929d04053b4d0d205044a96 and in particular by this change:

@@ -339,7 +340,7 @@ function create(tag, options) {
   const el = document.createElement(tag)
 
   for (const key in options)
-    el[key] = options[key]
+    options[key] && (el[key] = options[key])
 
   return el
 }

This means the async attribute is not added to the generated script tag anymore when it’s false and, since (if I’m not mistaken) all script tags created via js are async by default, it causes script tags to load/execute out of order (which causes the above behaviour). I tried building my own version of Flems with this slight change (key === 'async' || options[key]) && (el[key] = options[key]) and it fixes the issue.

Can you take a look to validate if that’s an issue or not? If more info are needed feel free to ask. Thanks!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
porsagercommented, Nov 1, 2021

Yeah, if you upgrade to latest that should solve your issues 😊

1reaction
porsagercommented, Nov 1, 2021

Fix also pushed to flems.io 🙂

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Script Tag - async & defer - Stack Overflow
Scripts that are dynamically created and added to the document are async by default, they don't block rendering and execute as soon as...
Read more >
Scripts: async, defer - The Modern JavaScript Tutorial
The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM....
Read more >
HTML script async Attribute - W3Schools
If the async attribute is set, the script is downloaded in parallel to parsing the page, and executed as soon as it is...
Read more >
The Script element - HTML: HyperText Markup Language
This element includes the global attributes. ... For classic scripts, if the async attribute is present, then the classic script will be fetched ......
Read more >
Eliminate Render-Blocking JavaScript with Async and Defer
Async and defer are two HTML5 attributes that allow delaying execution of scripts, eliminating blocking JavaScript. A must for performance!
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found