为什么apple.com使用JavaScript动态加载视网膜图片而不是媒体查询？

Question

Apple.com网站通常会先显示一张标准图片，然后使用JavaScript加载视网膜图片（如果设备支持视网膜屏幕）。

我想知道为什么苹果不直接使用CSS媒体查询来减少HTTP请求呢？

- luin

---

浏览器支持和统计数据收集可能吗？虽然这两个方面很容易跟踪，但它也可以是页面/服务器优化的一部分。有些浏览器可能会预先加载媒体查询并下载图片。 - Randall Hunt

媒体查询并不会以任何方式减少HTTP请求。 - BoltClock

Answer 1

简短回答——浏览器预取。
除非使用JS执行以下操作，否则他们不能做任何事情：
1. 进行媒体查询测试，使用JS，如果支持则填充高质量图像。
2. 进行媒体查询测试，使用JS并填充CSS样式表（其中包含url声明），如果支持则填充。
这里的目标不是减少HTTP请求。而是减少并发HTTP请求的数据，在很大程度上是冗余的-如果浏览器不支持高分辨率版本，但仍然被强制占用带宽，这种情况尤其突出。
JS操作的好处:
1. 页面加载速度更快，因为只下载了较轻的媒体文件。
2. 页面加载期间HTTP请求数更少。在请求HQ图像时，页面的其他部分已经设置好，因此“额外请求”不会影响体验（除非他们在DOM访问等方面做了一些愚蠢的事情-但这是一个普遍的真理）。
最终，“picture”规范与“source”元素的“srcset=”和“media=”属性相结合，将允许一种无需JS的方法，根据其自身的查询和页面分析（例如：用户是否在LTE连接上，还是他们目前在山区2G网络中）允许浏览器智能处理媒体文件。

- Norguard

---

你比我早进来了，我认为你说得很对。特别是指出并发连接的问题。 - wewals

Answer 2

为节省初始加载时间。特别是在像无线/3G这样的慢速/不稳定连接上。

如果您查看图像替换代码（https://gist.github.com/2029936）的格式化源代码，特别是函数__replaceNextQueue，您会注意到它在实际替换图像之前设置了超时。

这样做是为了确保浏览器事件队列已经完成，包括UI的初始绘制，然后再开始请求新图像。这使得浏览器可以下载更小（文件大小）的图像，并且用户可以在开始处理较大的图像之前执行他们的新操作。

将较大的图像下载推迟到UI的初始绘制之后，将节省时间，特别是在较慢的连接上。

- wewals

Answer 3

因为并非所有的图片都通过 CSS 加载，有些是通过 HTML 加载的。

- Caio Tarifa

---

但是他们可以使用background-image而不是在HTML中编写它。 - luin

除非那样做是可怕的。 - Francis Avila

这不是一个好的做法。例如：搜索引擎不会索引具有这种相关性的图像，您无法轻松地复制/保存等等。 - Caio Tarifa