Placement of script elements for inline scripts

[elbrant]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

What specific section or headline is this issue about?

sample code out of date

What information was incorrect, unhelpful, or incomplete?

ISSUE: instructions tell viewers to place their <script></script> tag(s) before the </head> tag.

What did you expect to see?

Current placement suggests that JS code is placed after the </body> tag and before the </html> tag, allowing all of the code to download in order and preventing any hiccups from code snags.

Do you have any supporting links, references, or citations?

files/en-us/learn/javascript/first_steps/what_is_javascript/index.md lines 214-220

Do you have anything more you want to share?

Request an edit. If I have misunderstood, please advise. Thank you! "el"

MDN metadata

Page report details

* Folder: `en-us/learn/javascript/first_steps/what_is_javascript` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md * Last commit: https://github.com/mdn/content/commit/f7c186696980fee97e72261370d7b5a8c1cd9302 * Document last modified: 2024-01-24T07:31:47.000Z

[hamishwillee]

For external scripts and modules you would prefer to have the script in the head because then its fetching starts earlier - you use defer, async, module attributes to make sure that the loading is non-blocking (defer in particular is well supported).

For inline scripts it depends on what is in the script. While they are blocking by default, if your inline script doesn't load external javascript then it isn't likely you're being blocked very long. On the other hand, as "general advice for beginners", having the inline script just before the closing HTML tag means that you don't have to think about what's in the script, and you can be sure that whatever you need in the DOM has already been loaded so coding

Upshot, I think that the internal javascript section https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#internal_javascript should suggest script element at the end but should also be more nuanced in its explanation of why.

@Josh-Cena Does that make sense to you?

[Josh-Cena]

Sounds fine to me. Not sure how much nuance we should put into an introductory article (prefetching, render blocking, main thread, gahhhh), but I think we should suggest "before </body>" by default since user-authored scripts are likely interacting with DOM.

[mb21]

Somewhat related: shouldn't we clean up that whole section to use <script type="module">? (It's supported on Safari >= 11 even.) Then we could remove the whole defer/async/DOMContentLoaded stuff which must be confusing to beginners?

[Josh-Cena]

@mb21: you should only use type="module" when you are using import/export. Using it elsewhere is just going to needlessly cause compat issues.

[mb21]

@Josh-Cena You mean compat issues with older browsers? While I'm all for supporting older browsers when possible, I think when you're writing JavaScript without a transpiler (like you'll likely be when you're a beginner reading that page), you won't get very far without writing some JS that will break on IE and Safari < 11 anyway. Even the optional chaining operator requires Safari > 13. And as long as you only use JS for progressive enhancement, that seems fine? Looking at the What is JavaScript page, defer/async/DOMContentLoaded takes up quite a lot of (brain) space.

[Josh-Cena]

You are not wrong, but I feel like we have to introduce these mechanisms at some point. I'm fine with just recommending type="module" by default though, if that means getting rid of everything else in this intro article.

[mb21]

Yes, probably makes the most sense to move those sections somewhere else (and link to that). Not sure what's the best place though. Is there some "legacy concepts" chapter? Or just into Common questions?

[mb21]

I've made a PR: https://github.com/mdn/content/pull/34937

Actually not sure we need to move the deleted content somewhere else. Perhaps the docs about async/defer in the linked script element and DOMContentLoaded event pages are enough?