Does there ever come a point when JS is more efficient and less of an overhead than pure HTML/CSS code?
My understanding is HTML and pure CSS are superior to using JavaScript when it comes to performance, but is that always the case: the example I saw was for a glitch animation effect of sorts that changed random letters in a string to create a transition to a new string.
Here is a simple example (keep in mind you would only see one line at a time, so it appears the characters are randomly being replaced):
hello there
h%llo t5ere
ho&l@ there
howla=t1e e
how#ar7 %oe
how are yo*
how are you
when I inspected the code, the developer basically just had:
<h2>
<span> hello there </span>
<span> h%llo t5ere </span>
<span> ho&l@ there </span>
<span> howla=t1e e </span>
<span> how#ar7 %oe </span>
<span> how are yo* </span>
<span> how are you </span>
</h2>
with distinct class names for each “stage1” “stage2” and so on. So my understanding is they just use CSS to hide/show each stage during various keyframes of a CSS animation.
But if I was asked to code this, I would actually make it random (different each time the function is called) using the math rand() function and a for/while loop (with alteration logic inside) to modify the text inside a single h2 tag, instead of creating a bunch of span tags, or even if I did it that way, I’d still use a for loop to generate the various (so-called) “random” span tags/text.
My assumption is they did this to eliminate the JavaScript overhead. But how much overhead is there really? I was thinking larger scale than this example… is it better performance to use JS or to write a bunch of extra html code as this dev did, which then has to be sent over the network (more data) and then each span element has to be added to and controlled by the DOM. assuming the JS code is say 5-10 lines of code, and the HTML method is say 100 span elements (99% of which are always hidden) which method would be better for production deployment performance? this is what prompted the original question at the beginning.