Web图片资源的加载与渲染时机

前端大全 · 公众号 · 前端 · 2017-08-02 20:30

正文

"display:none" > div >

图片资源请求如下：

设置了 display:none 属性的元素，图片不会渲染出来，但会加载。

原理

把DOM树和样式规则树匹配构建渲染树时，会把可渲染元素上的所有属性（如 display:none 属性和 background-image 属性）结合一起产出到渲染树。

当解析渲染树时会加载标签元素上的图片，发现元素上有 background-image 属性时会加载背景图片。

当绘制时发现元素上有 display:none 属性，则不计算该元素位置，也不会绘制该元素。

推荐文章

脚本之家 · 大厂都在用的 12 大主流 AI 前端组件库！阿里、蚂蚁、腾讯也纷纷推出 AI 组件库！

10 小时前

脚本之家 · 大厂都在用的 12 大主流 AI 前端组件库！阿里、蚂蚁、腾讯也纷纷推出 AI 组件库！

10 小时前

前端大全 · 突发！美国对中国断供 EDA。网友：真卡脖子

4 天前

前端大全 · 蔚来面试题：计算白屏时间

4 天前

前端之巅 · 用印度程序员冒充AI的“独角兽”彻底倒闭了！伪AI烧光5亿美元，连微软和亚马逊都被“坑”了

4 天前

总裁营销兵法 · 小扎二胎还要生女儿，因为他生命中的女人个个强大精彩

8 年前

加拿大约克论坛 · 英国议会大厦遭遇恐怖袭击，加拿大总理杜鲁多威武表态！！

8 年前

济宁大众网 · 山东这座海岛即将轰动全国！2017第一跑，约不约？

8 年前

毒舌美少女 · 今日她最美，涂个粉嫩唇色竟也没什么违和感～

7 年前

吉良先生 · 这只手袋全球只有中国卖，这些明星都想抢一只！

7 年前