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
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.
For reference:
https://twitter.com/zachleat/status/1169998370041208832
@[email protected] š (@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
and if it's HTML injected by JS? is that gonna screw things up
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};I honestly don't know which is being used, I'd guess svelte uses
createElement thoughI would suggest not guessing and find out š
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
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
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