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

ἔρως•5mo ago

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

Mango ManOP•5mo ago

Why is that?

ἔρως•5mo ago

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

Mango ManOP•5mo ago

Can I not just put it after the HTML

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

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

ἔρως•5mo 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•5mo ago

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

ἔρως•5mo ago

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

Mango ManOP•5mo ago

Yeah I suppose I can move it there

ἔρως•5mo 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•5mo ago

But this is not really answering my initial question

ἔρως•5mo 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•5mo 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

ἔρως•5mo ago

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

Mango ManOP•5mo 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

ἔρως•5mo ago

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

Mango ManOP•5mo ago

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

ἔρως•5mo ago

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

Mango ManOP•5mo ago

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

ἔρως•5mo ago

the html can break it too

Mango ManOP•5mo ago

How?

ἔρως•5mo 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•5mo 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

ἔρως•5mo ago

with the code you have?

Mango ManOP•5mo ago

yes

ἔρως•5mo 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•5mo ago

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

ἔρως•5mo ago

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

Mango ManOP•5mo ago

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

ἔρως•5mo ago

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

Mango ManOP•5mo ago

I suppose I’ll just embed it then

ἔρως•5mo ago

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

Gaming

Programming

To embed or to not embed?