最近本人把工作辞了,在这疫情期间把工作辞了确实是有点冲动,去几家公司面试发现自己的技术还有待提升啊 。
下面是我面试的时候面试官问我的一道问题:给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;}
通过测试后发现:
- 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了解多少呢】
推荐阅读
- css背景半透明,边框和内容不透明
- 纯CSS 精美按钮UI设计、实现及实例
- 瓷器中的冰裂纹,哥窑瓷器有什么特点
- |普通人眼中的翡翠,与工匠眼中的艺术品,是有不同看法的
- 茶席设计五要素的介绍,旧物茶席中的古朴风景
- 茶艺表演中的礼仪介绍,茶艺表演的分类介绍
- 纯CSS实现轮播图
- 第六十一章、C程序中怎么调用Linux中的shell命令
- 如何启用Windows 10 Version 2004中的硬件加速GPU调度?
- 禅茶中的端茶送客,叫做端茶送客