Duplicated link elements & performance

Will performance be impacted by having duplicate link elements? I have the option of writing some code a smart way or a lazy way. The smart way is a lot of effort, but will ensure that link elements are not duplicated. The lazy way will allow the link elements to be duplicated potentially dozens of times, but it's almost no effort to code. Will having, say, 50 clones of a link element effect the page performance? or will the browser just go "oh yeah I've done that already" and only waste time on reading the html?
9 Replies
13eck
13eckā€¢2y ago
As long as the code is HTML and not HTML-injected-via-JS you should be fine. Browsers have been working on being the best HTML parser for decades now so they've gotten very good at it.
13eck
13eckā€¢2y ago
@zachleat@zachleat.com šŸ˜ (@zachleat)
Which has a better First Meaningful Paint time? ā‘  a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets ā‘” a client rendered React site with exactly one tweet on it (Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms)
Likes
852
Retweets
291
Twitter
WillsterJohnson
WillsterJohnsonā€¢2y ago
and if it's HTML injected by JS? is that gonna screw things up
13eck
13eckā€¢2y ago
If you're using JS it's going to be slower than pre-compiled HTML, yes It also depends on how you inject it with your JS. document.createElement() is more performant than element.innerHTML = {blah blah bla};
WillsterJohnson
WillsterJohnsonā€¢2y ago
I honestly don't know which is being used, I'd guess svelte uses createElement though
13eck
13eckā€¢2y ago
I would suggest not guessing and find out šŸ˜‰
WillsterJohnson
WillsterJohnsonā€¢2y ago
I think I might just go ahead with the complicated-but-safe option, it's gonna be a pain but if it avoids clogging the browser with crap I guess I should probably do so
13eck
13eckā€¢2y ago
If you have the time it'd be great if you could do both and do a perf test on them. Then implement the better one and showcase your findings. Not sure if this is personal or work, but having both to show could be useful in the future for both
WillsterJohnson
WillsterJohnsonā€¢2y ago
I'll probably do that, the quick and dirty solution is to just dump the link elem into <head> every time a component is used, the complicated and safe solution is figuring out how to disconnect the link elems from the component so the destroy event doesn't remove the links which may be still in use by other components on the page... or maybe deleting the links from dom doesn't matter as the stylesheet is still in the page memory? This kind of low level stuff is what I hoped I would avoid by using a framework, alas there is no escape