你对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=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>

通过测试后发现：

• 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, 背景图片就不加载，基本符号我的预想。

由于本人的知识有限，有很多问号？？？，希望大神能给我解惑。