Do browsers request images that have been overwritten in CSS?
-
07-07-2021 - |
题
Let's say I have CSS that looks like this:
#element {background-image: url("image1.png");}
#element {background-image: url("image2.png");}
Will the browser:
- Request image1.png, then request image2.png and display it? Or...
- Parse the CSS first, see that the selector specifying image2.png takes priority, and only request and display image2.png?
解决方案
From some quick testing with Chrome and the Developer Tools:
- If
#element
does not exist then neither image is downloaded, since the browser has no matching element to apply the style to - If
#element
exists the usual CSS cascading and specificity rules apply and onlyimage2.png
will be downloaded since that rule appears after theimage1.png
rule.
That said, other browsers may behave differently.
其他提示
It parses the CSS first, and then requests the image, so image1.png would not be downloaded
If you implement a website running this in chrome you can see that the browser parses the CSS first, creates the rules & requests it needs then makes the request.
In CSS rules at the bottom of the CSS override any from the top, so the browser knows to only request images that are the final rules.
When you first request a page, your browser sends arequest to the server, as you know. The browser then starts parsing the page.
When it finds a reference to an external resource, it will do yet another request for that resource. So I think that it will still load it.