最近本人把工作辭了，在這疫情期間把工作辭了確實是有點沖動，去幾家公司面試發現自己的技術還有待提升啊。
下面是我面試的時候面試官問我的一道問題：給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, 背景圖片就不加載，基本符號我的預想。
由于本人的知識有限，有很多問號？？？，希望大神能給我解惑。
