最近本人把工作辞了，在这疫情期间把工作辞了确实是有点冲动，去几家公司面试发现自己的技术还有待提升啊。
下面是我面试的时候面试官问我的一道问题：给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=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26App%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853);
}
.img{
display: none;
}
<div class="root">
<img class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593930759417&di=cffebc811f829fea4a998cb6e7215868&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D3571592872%2C3353494284%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1200%26h%3D1290" alt="" srcset="">
<div class="bg_img"></div>
</div>
通过测试后发现：
这是为什么呢？
我的理解是，浏览在渲染的时候，所有的html标签是在html线程中渲染，当解析到img标签的时候，会把里面的url链接push到网络请求的线程中，而display:none，是在浏览器绘制阶段生效的，但是这个时候图片已经交给网络线程去加载了，所以两个没有关系，最难理解的是背景图片，我在网上找答案没有找到只找到：伪类背景图片只在触发伪类时候才会请求加载（因此建议请求雪碧图---即一堆小图汇总到一张大图上，这样不会有UI跳跃感）。我对这句话不是很理解，什么是伪类背景图？css在绘制阶段是怎么处理链接的？为什么在标签本身上加了display:none,还是会加载图片呢？理解这些的朋友在评论下方帮我解答一下谢谢！
然后我尝试了一下另外一个隐藏属性：visibility: hidden；
这个无论在那里添加图片都进行了加载，这也是我的预料之中，因为这个隐藏会占位置，那么里面的css必定会进行解析了。
我在:berfor和:after伪类里面设置背景图片，果然在标签选择器中设置display:none, 背景图片就不加载，基本符号我的预想。
由于本人的知识有限，有很多问号？？？，希望大神能给我解惑。
