I typically place my scripts in .js files and call them right after the element they are used for. I have seen people arguing that they should be in the head and called with _onload_ or be placed at the bottom of the body. What do you all think?
@boohooOct 11.2021 — #That's an excellent and very opinionated question.
I personally don't like to have entire script wrapped in *load* event. It adds extra indentation. I prefer to silently assume that the script is running when the DOM is ready.
In the past I used to prefer putting <script> just before closing the </body>. But now, as we have async and defer attributes of the <script>, I feel like they are the best. Most of the time I end up having my script in <head> and with defer attribute:
``javascript<i> </i><head> ... <script src="foo.js" defer></script> ... </head><i> </i>`</CODE> This way, script runs when the DOM is ready, but it starts downloading sooner. If your page has a lot of content in the source, it actually makes quite a difference in terms of performance.
And if my script doesn't need DOM, <C>async` is a better choice, because it runs as soon as it's downloaded, but also doesn't block rendering of the DOM when it's being downloaded.