css - 当图像被 css 隐藏时阻止图像下载

Question

我正在运行一些测试，以了解如何防止下载被 CSS 隐藏的图像资源。

一些测试结果让我感到困惑，我正在寻求帮助以找出原因。

假设有一个<div>隐藏..

---

案例 1。两者都是 background-image和 display: none;设置为 <div>

>> 图片下载完毕

案例 2. background-image设置为 <div> , 和 display:none;设置为其父元素。

>> 图片未下载

---

据我所知，设置display:none;将从渲染树中删除元素。所以我想知道在案例 1 中下载图像是否是正确的行为，我觉得不应该。

Chrome 与 FF 的工作方式不同，后者在这两种情况下都不会下载图像。

我一直在搜索，但找不到令人满意的答案，为什么 chrome 会这样工作。

我附上了一些我引用的文章。

• https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en

• https://timkadlec.com/2012/04/media-query-asset-downloading-results/ (测试 2 和 3)

任何意见将不胜感激:)

Answer 1

有趣...

顺便说一下，display none 不会从渲染树中移除元素，因为 :nth-child() 仍然计算渲染树中那些 display none 元素。

我猜 Chrome 并没有涉及这些元素。