css background url() 多次使用同一图片的请求次数

Question

css代码如下

.a {background: url("img.png") 0 -250px no-repeat;}
.b { background: url("img.png") 0 0 no-repeat;}

这样在css中请求同一张图片，请求次数是一次还是两次？

Answer 1

刚刚测试了一下，应该是只请求了一个，通过刷新页面查看network中的请求信息即可，你可以自己试试看

Answer 2

请求会发两次吧（没验证，我猜的），不过浏览器会缓存的，所以除了未缓存的第一次，剩下的直接 302 了。

但是从 CSS 的角度来讲，你这个明显是冗余代码了，应该重构一下，比如：

css.bg { background: url("img.png") no-repeat; }

.bg.a { background-position: 0 -250px; }

.bg.b { background-position: 0 0; }

至于你怎么安排选择符那就看你怎么设计了，以上只是个例子。

Answer 3

Answer 4

证明这个结论之前，要先阐述一下浏览器的渲染机制:

如上图，浏览器通过网络请求加载页面资源，在页面呈现之前无论如何都要经历以下过程：

HTML→DOM
CSS→CSSOM
DOM + CSSOM → Render Tree
对Render Tree进行布局计算(Layout)
对布局结果进行屏幕绘制(Paint)

浏览器会对所有的样式表进行解析成css对象再和渲染到页面上，所以同一路径只会请求一次。

Answer 5

请求图片是get请求，get请求是可以缓存的，所以浏览器发现url相同时就会使用缓存而不会再次请求。把相同的url后面加上不同的参数，就会请求两次了。