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

Question

Apple.com始终首先显示标准图像,然后使用javascript加载视网膜图像(如果设备支持视网膜).

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

Answer 1

简答 - 浏览器预取.

除了使用JS之外,他们无能为力:

1. 做媒体查询测试,使用JS,如果有支持则填写HQ图像
2. 进行媒体查询测试,使用JS并填写CSS样式表(其中包含url声明),如果有支持的话.

这里的目标不是减少HTTP请求.目标是减少并发 HTTP请求,对于大部分冗余的数据 - 甚至更多,如果浏览器不支持高分辨率版本,但无论如何都被迫使用该带宽.

做JS事情的好处:

1. 页面加载速度更快,因为它只是下载的较轻的媒体
2. 页面加载期间的HTTP请求更少.当您请求HQ图像时,页面的其余部分已经设置,因此"额外请求"将减慢体验而不是一点(除非他们使用DOM访问做一些愚蠢的事情,或者类似 - 但是普遍真理)

最终,<picture>规范,与一起srcset=和media=该属性的<source>元素,将允许允许浏览器能够智能地处理媒体的JS-free方法,根据他们自己的内部查询和页面分析(如:是的LTE用户连接,或者他们是在山上的2G,在某个时刻的某个地方).