Geek Answers Handbook

Will the browser download the css file several times on the same page?

I am working on a large project in asp.net. I like breaking it down into user controls, so I was wondering if it is possible to load CSS into user control code, and not into the header of the main page?

Most likely, some of these controls will be presented several times on the same page, so there will be repeated style tags, will the browsers reload them or just ignore them in this case?

+6
source share
5 answers

the browser will download the css file twice, but the second time it will probably be cached, so it will be much faster.

the problem is that downloading this file is not the only overhead here, because the browser will also need to re-analyze the css file and iterate through the DOM tree to check if any of the nodes in it correspond to the new selectors and then apply them .

you are probably better off including the css file once, and you should also look at css linking and minimization.

+3
source

The browser will try to load each stylesheet, of course, if it has already been loaded and cached, then it will no longer be loaded (but it will analyze it).

I assume that you do not want to place it on the main page, because you have several components, and each of them has its own stylesheet (then you do not want to load them all using only a few components).

The performance impact should be quite small (both when parsing and when applying the same stylesheet), but if you do one of the following:

  • You delete CSS classes in several stylesheets (because patches of other CSS files will be overwritten);
  • You do some tricks with your style sheets (for example, $("#linkId").attr("href", "/example.com/override.css"); );
  • You change them programmatically;
  • You rely on client-side LESS parsing (with type="text/less" ).

Then you can avoid replacing (see also jQuery: add dom element if it does not exist ):

 <script type="text/javascript"> if ($("link[href='/example.com/component.css']").length == 0) $("<link href='/example.com/component.css' rel='stylesheet'/>").appendTo("head"); </script>

Alternatively, you can use id (instead of checking with href ). Note: if you do this often, you can write a helper function.

+4
source

So this is a good question, so I decided to check it out.

I made a single div page with the "test" class and made two CSS files (1.css and 2.css). The first test specified has a red background, the second is blue.

When you turn them on as

 1.css 2.css div

The div did as you expected and displayed as blue. But! When it is turned on as

 1.css 2.css div 1.css

The div turned red.

So, the WILL browser reevaluates the styles, although it did not run another request for 1.css and just used the cached version.

Tested on Firefox Nightly 43.0a

+2
source

If you insert the same stylesheet several times, it will load all the stylesheets one by one, but only if caching is turned off. When caching is enabled, the entire stylesheet will be loaded from the cache, then you do not need to worry about reloading resources.

But why do you want to include the same stylesheet multiple times?

Use it on your main page.

+1
source

There are a few things you could do. Add a class to the main body when the type changes.

 class="user-one" class="user-two"

This will allow you to write your own code for each type of user.

Instead, you can add MD5 validation to the CSS file as this will force it to load new CSS.

+1
source

More articles:


All Articles