To embed or to not embed?

My site has a very small amount of JavaScript. This snippet infact is the entirety of my JavaScript:

(document.getElementById("theme-button").onclick = () => {
    const theme = localStorage.getItem("theme") === "light"
        ? "dark" : "light";
    localStorage.setItem("theme", theme);
    document
        .getElementsByTagName("html")[0]
        .setAttribute("data-theme", theme);
})();

(document.getElementById("theme-button").onclick = () => {
    const theme = localStorage.getItem("theme") === "light"
        ? "dark" : "light";
    localStorage.setItem("theme", theme);
    document
        .getElementsByTagName("html")[0]
        .setAttribute("data-theme", theme);
})();

Now as a non-webdev, does it make sense performance-wise to embed this in a <script> tag in my HTML? Or can I put this in an external script file that I load in via <script src=…>? I would hope that with browser caching the latter would have zero performance impact after the initial load, but I am not really sure.

31 Replies

ἔρως•4mo ago

depends in it's current form, it won't work

Mango ManOP•4mo ago

Why is that?

ἔρως•4mo ago

you need to wrap it in a listener for either load or DOMContentLoaded

Mango ManOP•4mo ago

Can I not just put it after the HTML

<html>…</html>
<script>…</script>

<html>…</html>
<script>…</script>

ἔρως•4mo ago

basically, just this:

document.addEventListener('DOMContentLoaded', (event) => {
  [code comes here]
});

document.addEventListener('DOMContentLoaded', (event) => {
  [code comes here]
});

not outside the html, no it will work, by accident, but that's invalid html

Mango ManOP•4mo ago

Is it an accident if the HTML spec is explicit about how to handle misformed input? /s

ἔρως•4mo ago

what people also do is to put it at the end of the body

Mango ManOP•4mo ago

Yeah I suppose I can move it there

ἔρως•4mo ago

lets just say that people wrote some trully horrible things, and html5 had to "support" it to prevent breaking stuff even further no, put it in the head

Mango ManOP•4mo ago

But this is not really answering my initial question

ἔρως•4mo ago

it is in it's current form, you can put it in the html, at the end of the body but it is not the "right way"

Mango ManOP•4mo ago

My question was about using a script tag with JS in my HTML vs using a script tag with src referencing an external file

ἔρως•4mo ago

you're focusing on one aspect, im seeing the entire question and in it's current form, there's no answer

Mango ManOP•4mo ago

I don’t really care if it’s the ‘right way’ so long as it works TBH I am just curious about the caching thing

ἔρως•4mo ago

if you want an error prone way, just put it at the bottom of the body

Mango ManOP•4mo ago

What’s error prone about putting it at the end of the body?

ἔρως•4mo ago

well, you're very few modifications away from breaking the script

Mango ManOP•4mo ago

There will be no modifications, that is the final javascript It’s a fully static site with a theme toggle

ἔρως•4mo ago

the html can break it too

Mango ManOP•4mo ago

How?

ἔρως•4mo ago

a wrote <a will be enough or you forget a <textarea> there's more, but im playing overwatch and cant think of other examples

Mango ManOP•4mo ago

I mean that is all already being checked for, so I don’t think that’s an issue I need to worry about I have scripts to make sure I don’t forget tags lul Unless I misunderstand you But anyways, I am really curious about the initial question I posed

ἔρως•4mo ago

with the code you have?

Mango ManOP•4mo ago

yes

ἔρως•4mo ago

you can either put it at the end of the body, or keep it as a script you save 1 network request, so

Mango ManOP•4mo ago

I would hope that with browser caching there won’t be that extra request Or is that a really bad hope?

ἔρως•4mo ago

in terms of caching, html usually isn't cached, and js files may be cached up to 1 month

Mango ManOP•4mo ago

~~I’ve come to find that most things webdev are poorly designed or straight up broken~~

ἔρως•4mo ago

depends on the cache, the request for the js file may be supressed and depends on the html

Mango ManOP•4mo ago

I suppose I’ll just embed it then

ἔρως•4mo ago

it's the most/least efficient, depending on configurations

Gaming

Programming

To embed or to not embed?