Does importing same CSS file multiple times add any performance issues?

Question

I have seen people discussing the same Javascript getting loaded multiple times, creating problems as the code runs every time on every include.

I am including the same CSS file multiple times in the same DOM (cannot avoid adding this as I'm using some components):

    <link href="style.css" rel="stylesheet" type="text/css">

1. Will the DOM size increase?
2. Does the CSS file get rendered every time on every include?
3. Will this affect the performance of the page?

Note: As I am using the same CSS File, it is downloading only once.

Flowered

Answer 1

If your CSS file once rendered and used, second import of CSS won't be used and I don't think that it causes any problems. For example:

import css 1
import css 2

then you have here <p class="test"> and this test is only taken once for this tag from the css 1 import and the import css 2 will only be imported and not used. In this sense, I would say, this is only overhead and eats small amount of time for loading the file. I don't see further problems here.

Extrusive

Answer 2

I would think that this would add unnecessary overhead, because, even though the style sheet is cached in your browser, it still has to check if it's cached for multiple includes (unless your browser is aggregating all unique style sheets before fetching them). Even at that, I'd expect the the latency to be minimal, but definitely not a performance improvement. If you split a style sheet into multiple files, you might get a perceived performance gain on the initial load because of concurrent http connections, but the software maintenance cost of that separation would not likely be worth it, and it wouldn't do anything for you on subsequent page loads.

Konstanze