你对css中的display了解多少呢

最近本人把工作辞了,在这疫情期间把工作辞了确实是有点冲动,去几家公司面试发现自己的技术还有待提升啊 。
下面是我面试的时候面试官问我的一道问题:给img标签加上了display:none后是否还加载图片呢?添加背景图片的标签加上display:none属性是否还加载图片呢?如果给他们的父级元素添加display:none还加载图片吗?
面试的时候,我按照我对浏览器渲染的原理来分析,前面两条答对了,最后一条没有答对,今天赶紧的测试一下,其实里面的原理和基础知识我了解的非常少,失业这段时间确实感觉到自己与大厂的程序员有很大的区别啊!不扯蛋了说回正题吧!
<style>.root{/* display: none; */}.bg_img {display: none;background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593930759416&di=8009f2b41f4de0b003f603e58ffdce48&imgtype=0&src=https://www.isolves.com/it/cxkf/yy/CSS2/2020-07-10/http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26App%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853);}.img{display: none;}

你对css中的display了解多少呢
通过测试后发现:
  • img标签无论是自己本身还是父级标签加display:none,在渲染的过程中都会加载图片 。
  • 标签的背景图如果本身的加display:none会加载图片,而如果是父级标签有display:none背景图片不加载
这是为什么呢?
我的理解是,浏览在渲染的时候,所有的html标签是在html线程中渲染,当解析到img标签的时候,会把里面的url链接push到网络请求的线程中,而display:none,是在浏览器绘制阶段生效的,但是这个时候图片已经交给网络线程去加载了,所以两个没有关系,最难理解的是背景图片,我在网上找答案没有找到只找到:伪类背景图片只在触发伪类时候才会请求加载(因此建议请求雪碧图---即一堆小图汇总到一张大图上,这样不会有UI跳跃感) 。我对这句话不是很理解,什么是伪类背景图?css在绘制阶段是怎么处理链接的?为什么在标签本身上加了display:none,还是会加载图片呢?理解这些的朋友在评论下方帮我解答一下谢谢!
然后我尝试了一下另外一个隐藏属性:visibility: hidden;
这个无论在那里添加图片都进行了加载,这也是我的预料之中,因为这个隐藏会占位置,那么里面的css必定会进行解析了 。
我在:berfor和:after伪类里面设置背景图片,果然在标签选择器中设置display:none, 背景图片就不加载,基本符号我的预想 。
由于本人的知识有限,有很多问号???,希望大神能给我解惑 。

【你对css中的display了解多少呢】


    推荐阅读