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

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

css代码如下

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

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


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

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

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

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


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


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

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

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

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

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

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


【热门文章】
【热门文章】